Accentio Studios Website
Resumo
O site da Accentio Studios conta a história da empresa como um voo 3D guiado por scroll: um foguete atravessa 12 seções enquanto o React Three Fiber renderiza sol, planetas e estrelas procedurais. Roda em Next.js 16 com React 19 e React Server Components, em três idiomas. Os componentes vêm do Excelsior, um design system React que construí com theming por tokens em Tailwind 4 sobre Base UI.
Pontos-chave
Home 3D em React Three Fiber12 seções narrativas, 50 componentes .tsx
Construiu uma home 3D guiada por scroll com React Three Fiber e drei: voo de foguete com keyframes, HUD, linha do tempo e corpos celestes procedurais.
Separação entre server e client
Renderizou as 12 seções como React Server Components e deixou a cena 3D em componentes client, com rotas por sub-path em inglês, espanhol e português.
Biblioteca de componentes Excelsior7 exports por subpath, 14 suítes de Vitest, 11 guardas de empacotamento e arquitetura
Construiu o Excelsior, uma biblioteca de componentes React 19 sobre Base UI com theming por tokens em Tailwind 4: Button, Badge (API tone × variant), Card, Avatar, Icon e um theme provider claro/escuro com portal container.
Empacotamento dual ESM/CJS3 layouts de instalação cobertos pela checagem de release
Empacotou o Excelsior como biblioteca dual ESM/CJS com tipos por condição, verificada com publint e attw e com uma matriz de instalação sobre node_modules plano, hoisted e com symlinks.
Metadata de SEO e fontes
Adicionou metadata de SEO com imagens Open Graph e metadataBase, e serviu as fontes variáveis woff2 a partir do próprio site.