ROCKVERSE
- ESTUDIO
- MILWEB
- TIPO
- EXPERIENCIA EN SCROLL
- ESTADO
- PROYECTO PROPIO · DEMO
02 / LA IDEA
Sitio-experiencia sobre rock · motion design de punta a punta
Las marcas de música y cultura disputan la atención en segundos, y los sitios institucionales comunes no generan deseo, memoria ni ganas de compartir.
01 / 01
Lenis con lerp 0.1 reemplaza el scroll nativo, con anclas recalculadas vía offset de navbar en vez de saltos secos.
02 / 02
Reveal por máscara con stagger de 35ms por carácter, más paralaje de mouse en tres capas independientes.
03 / 03
Vinilo que gira con el progreso de la sección y marquee que se inclina según la velocidad instantánea del scroll.
04 / 04
Code-splitting por sección, partículas en canvas crudo pausadas fuera del viewport y reduced-motion tratado en dos capas.
0102030404 / BAJO EL CAPÓ
01El motion de ROCKVERSE no es una librería estándar puesta en automático. El scroll pasa por Lenis (lerp 0.1, smoothWheel) y el scroll-behavi…+
El motion de ROCKVERSE no es una librería estándar puesta en automático. El scroll pasa por Lenis (lerp 0.1, smoothWheel) y el scroll-behavior: smooth nativo del CSS queda apagado, para evitar que los dos sistemas se disputen el mismo frame. Es un conflicto sutil: solo aparece cuando alguien hace clic en un link ancla y la página "se traba" a mitad del scroll. El cursor personalizado (CustomCursor.tsx) solo se activa en pointer: fine, así que las pantallas táctiles nunca pagan el costo. Usa un anillo con física de spring (stiffness 250, damping 25) que sigue a un punto rígido, y un atributo data-cursor en los elementos interactivos cambia la etiqueta según el contexto, como "GIRAR" sobre un vinilo. Sin re-renders innecesarios, porque el estado solo cambia cuando el valor realmente cambia (bail-out de React vía Object.is). El headline del hero se revela letra por letra con máscara (overflow-hidden + translateY por motion.span, stagger de 35ms por carácter) y reacciona a la posición del mouse con paralaje en tres capas: fondo, título y luz radial, vía useMotionValue + useSpring + useTransform. Todo con fallback estático completo cuando prefers-reduced-motion está activo.
02Lo que separa esto de "otro sitio más con fadeUp" son las escenas ligadas al propio scroll, no solo disparadas por él. La timeline de década…+
Lo que separa esto de "otro sitio más con fadeUp" son las escenas ligadas al propio scroll, no solo disparadas por él. La timeline de décadas (History.tsx) tiene una barra de progreso en gradiente cuya escala Y viene de useScroll + useSpring del progreso de la sección entera, mientras cada card corre su propio useScroll local para dar paralaje a la imagen (-8% a 8%) y desplazar el año lateralmente. En desktop la imagen queda sticky, lo que crea profundidad sin necesitar WebGL. En la sección de álbumes, los vinilos detrás de las portadas giran a medida que el usuario recorre la grilla entera (useTransform de 0 a 180 grados sobre el scrollYProgress de la sección), y solo ganan un animate-spin-slow de verdad cuando se abren en el modal. El divisor de marquee va más allá: en vez de desplazarse a velocidad fija, aplica un skewX calculado a partir de la velocidad instantánea del scroll (useVelocity sobre scrollY, mapeada a -5°/5° con spring). El texto se inclina más cuanto más rápido rueda el visitante. Es el tipo de detalle que solo existe en un sitio que trata el scroll como instrumento, no como gatillo de fade-in.
03Mantener Lighthouse 99/100/100/100 con ese volumen de efectos exigió decisiones de arquitectura, no suerte. El app/page.tsx carga Hero, Hist…+
Mantener Lighthouse 99/100/100/100 con ese volumen de efectos exigió decisiones de arquitectura, no suerte. El app/page.tsx carga Hero, History, Navbar y la barra de progreso de forma eager, que es lo que aparece en el primer pliegue, y hace next/dynamic de las otras nueve secciones debajo (Bands, Instruments, Genres, Festivals, Albums, HallOfFame, Curiosities, Stats, Gallery, Newsletter, Footer). Así el bundle inicial no paga el costo de código que el usuario tal vez nunca llegue a ver. Las partículas de brasa del hero (EmberCanvas.tsx) no son componentes Framer Motion. Son un canvas 2D crudo dibujado a mano, con IntersectionObserver pausando el requestAnimationFrame fuera del viewport y un listener de visibilitychange pausando cuando la pestaña pierde el foco, además de devicePixelRatio limitado a 2 y densidad de partículas cortada a la mitad en mobile. next/image usa calidades personalizadas (qualities: [60, 75], hero explícitamente en 60) para recortar payload de LCP sin desenfocar la imagen de forma perceptible. Y prefers-reduced-motion se trata en dos capas: un kill-switch global en el CSS, que pone en cero todas las animation-duration y transition-duration, más chequeos puntuales vía useReducedMotion() en los componentes que hacen cálculo de física (paralaje del hero, timeline, rotación de los vinilos). Sin la segunda capa, la query CSS mataría la transition pero dejaría los cálculos de useTransform corriendo en cada frame.
04Lo que más diferencia el proceso está documentado en docs/DESIGN-AUDIT.md: una autoauditoría de 20 problemas, escrita como si fuera un jurad…+
Lo que más diferencia el proceso está documentado en docs/DESIGN-AUDIT.md: una autoauditoría de 20 problemas, escrita como si fuera un jurado de premiación evaluando el sitio ("veredicto general: 7.2/10"), cubriendo hero, paleta, tipografía, espaciado, componentes e imágenes, con un roadmap de 5 fases explícito. La Fase 4 de ese roadmap, "Motion Design", listaba exactamente lo que faltaba: Lenis, headline cinético, timeline con scrub, skew en el marquee por velocidad. Es literalmente lo que está implementado en el código hoy. Tratar el propio proyecto personal como si fuera un cliente exigente, con auditoría escrita, tabla de prioridad (P0 a P3) y reevaluación de Lighthouse en cada fase, es lo que separa "hicimos un sitio bonito" de un proceso de diseño repetible.
CONSTRUIDO CON — Next.js 16 · TypeScript · Tailwind v4 · Framer Motion · LenisCÓDIGO ↗
06 / RESULTADO
ANTESDE LA AGUJA.
