Accentio Studios Website
Resumen
El sitio de Accentio Studios cuenta la historia de la empresa como un vuelo 3D guiado por scroll: un cohete cruza 12 secciones mientras React Three Fiber renderiza sol, planetas y estrellas procedurales. Corre en Next.js 16 con React 19 y React Server Components, en tres idiomas. Sus componentes salen de Excelsior, un design system React que construí con theming por tokens en Tailwind 4 sobre Base UI.
Puntos clave
Home 3D en React Three Fiber12 secciones narrativas, 50 componentes .tsx
Construí una home 3D guiada por scroll con React Three Fiber y drei: vuelo de cohete con keyframes, HUD, línea de tiempo y cuerpos celestes procedurales.
Separación server y client
Rendericé las 12 secciones como React Server Components y dejé la escena 3D en componentes cliente, con rutas por sub-path en inglés, español y portugués.
Librería de componentes Excelsior7 exports por subpath, 14 suites de Vitest, 11 guardas de empaquetado y arquitectura
Construí Excelsior, una librería de componentes React 19 sobre Base UI con theming por tokens en Tailwind 4: Button, Badge (API tone × variant), Card, Avatar, Icon y un theme provider claro/oscuro con portal container.
Empaquetado dual ESM/CJS3 layouts de instalación cubiertos por el chequeo de release
Empaqueté Excelsior como librería dual ESM/CJS con tipos por condición, verificada con publint y attw y con una matriz de instalación sobre node_modules plano, hoisted y con symlinks.
Metadata SEO y fuentes
Agregué metadata SEO con imágenes Open Graph y metadataBase, y serví las fuentes variables woff2 desde el propio sitio.