Accentio Studios Website
Summary
The Accentio Studios website tells the company story as a scroll-driven 3D flight: a rocket crosses 12 sections while React Three Fiber renders a procedural sun, planets and stars. It runs on Next.js 16 with React 19 and React Server Components, in three languages. Its components come from Excelsior, a React design system I built with token-driven Tailwind 4 theming on top of Base UI.
Highlights
3D homepage in React Three Fiber12 story sections, 50 .tsx components
Built a scroll-driven 3D homepage with React Three Fiber and drei: a rocket flight with keyframes, a HUD, a timeline and procedural celestial bodies.
Server and client split
Rendered the 12 story sections as React Server Components and kept the 3D scene in client components, with sub-path routing in English, Spanish and Portuguese.
Excelsior component library7 subpath exports, 14 Vitest suites, 11 packaging and architecture guards
Built Excelsior, a React 19 component library on Base UI with token-driven Tailwind 4 theming: Button, Badge (tone × variant API), Card, Avatar, Icon and a light/dark theme provider with a portal container.
Dual ESM/CJS packaging3 install layouts covered by the release check
Packaged Excelsior as a dual ESM/CJS library with per-condition types, checked by publint and attw and by an install matrix over flat, hoisted and symlinked node_modules.
SEO metadata and fonts
Added SEO metadata with Open Graph images and metadataBase, and self-hosted the variable woff2 fonts.