Akatsuki

The background isn't a video or a static image. It's a React Three Fiber scene rendered on a fixed <Canvas> behind the whole page, with a moon, fog and a 120-particle orbital field, all driven by hand-written GLSL shaders (simplex noise, fbm) instead of baked textures. Switching between the Akatsuki and Domain Expansion themes doesn't reload the scene: a single uMorph uniform interpolates between two palettes and two sky functions inside the same fragment shader, so the red moon and the Six Eyes sphere are the same geometry, just with the material morphing live.

Performance was treated as part of the design, not a later pass. The Canvas runs in frameloop="demand" with a manual 30fps throttle, because the background is atmospheric and 60fps would be wasted GPU. The dpr is locked to 1 even on retina screens, which cuts about 75% of shaded fragments, and rendering auto-pauses when the tab loses focus. On top of that, a PerfModeProvider runs a static heuristic (RAM, core count, prefers-reduced-motion, touch pointer) plus a watchdog that samples real FPS in the first seconds. If it drops below 45fps, the page falls back to a WebGL-free "lite" mode with CSS atmosphere only, and remembers the decision in localStorage so it doesn't stutter again on the next visit.

The product layer is deliberately simple on top of the visual complexity. The 24 figures (heroes and villains) and manga live in a typed array in lib/products.ts, the cart is a Context backed by localStorage that only starts persisting after hydration, so it doesn't overwrite storage on first render, and each character has a lore-accurate "aura" color mapped in lib/aura.ts: red Kurama for Naruto, blue Limitless for Gojo, silver Ultra Instinct for Goku. It fires as a Framer Motion particle burst when the item hits the cart. None of these interactions depend on Three.js: the aura, the toast and the card "punch" are pure CSS and SVG, which keeps the 3D scene isolated and code-split from the rest of the UI.

There's no checkout. Every card builds a wa.me link with the message already filled in (name, anime, price), and the cart assembles a single consolidated message with every line item and the total before opening WhatsApp. The text-formatting logic lives isolated in lib/whatsapp.ts, with no payment gateway or backend involved. Combined with Next 14 code-splitting the 3D scene (client-only) and the product page using the browser's native View Transitions for a shared transition between card and detail, the result is a store that looks expensive to run but ships entirely static, straight from Vercel's edge.