Akatsuki

Tienda de animes cinematográfica en 3D · checkout en WhatsApp

Las tiendas de nicho (animes y coleccionables) compiten por atención y necesitan una vitrina memorable que venda sin fricción.

• 01La escena de fondo no es un video ni una imagen. Es una escena React Three Fiber renderizada en un <Canvas> fijo detrás de todo el contenido…+

  LEER EL DETALLE TÉCNICO

  La escena de fondo no es un video ni una imagen. Es una escena React Three Fiber renderizada en un <Canvas> fijo detrás de todo el contenido, con luna, niebla y un campo de 120 partículas orbitales, todos movidos por shaders GLSL escritos a mano (ruido simplex, fbm) en vez de texturas listas. El cambio de tema entre Akatsuki y Expansión de Dominio no recarga la escena: un único uniform uMorph interpola entre dos paletas y dos funciones de cielo dentro del mismo fragment shader, así que la luna roja y la esfera de los Seis Ojos son la misma geometría, solo con el material cambiando en tiempo real.

• 02El rendimiento se trató como parte del diseño, no como ajuste posterior. El Canvas corre en frameloop="demand" con un throttle manual a 30fp…+

  LEER EL DETALLE TÉCNICO

  El rendimiento se trató como parte del diseño, no como ajuste posterior. El Canvas corre en frameloop="demand" con un throttle manual a 30fps, porque el fondo es atmosférico y 60fps sería desperdicio de GPU. El dpr queda fijado en 1 incluso en pantallas retina, lo que recorta ~75% de los fragmentos procesados, y el render se pausa solo cuando la pestaña pierde el foco. Por encima existe un PerfModeProvider con heurística estática (RAM, núcleos, prefers-reduced-motion, puntero touch) y un watchdog que mide el FPS real en los primeros segundos. Si cae por debajo de 45fps, la página baja a un modo "lite" sin WebGL, solo con atmósfera CSS, y memoriza la decisión en localStorage para no trabarse de nuevo en la próxima visita.

• 03La capa de producto es deliberadamente simple por encima de la complejidad visual. Las 24 figures (héroes y villanos) y los mangas viven en …+

  LEER EL DETALLE TÉCNICO

  La capa de producto es deliberadamente simple por encima de la complejidad visual. Las 24 figures (héroes y villanos) y los mangas viven en un array tipado en lib/products.ts, el carrito es un Context con localStorage que solo persiste después de hidratar, lo que evita sobrescribir el storage en el primer render, y cada personaje tiene un color de "aura" mapeado en lib/aura.ts: Kurama rojo para Naruto, Limitless azul para Gojo, Ultra Instinto plateado para Goku. Se dispara como una explosión de partículas vía Framer Motion cuando el ítem entra al carrito. Ninguna de estas interacciones depende de Three.js: el aura, el toast y el "punch" del card son CSS y SVG puro, lo que mantiene la escena 3D aislada y code-split del resto de la UI.

• 04No existe checkout. Cada card arma un link wa.me con el mensaje ya completo (nombre, anime, precio) y el carrito arma un único mensaje conso…+

  LEER EL DETALLE TÉCNICO

  No existe checkout. Cada card arma un link wa.me con el mensaje ya completo (nombre, anime, precio) y el carrito arma un único mensaje consolidado con todos los ítems y el total antes de abrir WhatsApp. La lógica de formateo de texto queda aislada en lib/whatsapp.ts, sin gateway de pago ni backend. Combinado con el code-splitting de la escena 3D en Next 14 (solo carga en el cliente) y con la página de producto usando View Transitions nativas del navegador para una transición compartida entre el card y el detalle, el resultado es una tienda que parece cara de correr pero sirve todo estático, directo desde el edge de Vercel.

CONSTRUIDO CON — Next.js · TypeScript · Three.js · React Three Fiber · Tailwind · Framer MotionCÓDIGO ↗

Escena 3D + 2 temas animados

PROYECTO PROPIO · DEMO

[ QUIERO ALGO PARECIDO ]