NexLayer — Landing de Producto con Animacion Scroll Flipbook
Landing premium de producto con estetica 'Dark Precision': fondo casi negro, acento azul electrico, tipografia arquitectonica y animacion hero que explota un laptop en sus componentes mientras el usuario hace scroll.
El Reto
Una landing de producto que cobra como agencia de $50k no se construye con plantillas. Tiene que sentirse como una pieza editorial: tipografia cuidada al kerning, animaciones que respiren, transiciones que recompensen el scroll, y una primera impresion que detenga el dedo del visitante en la primera fraccion de segundo.
El reto era construir una landing de portfolio que demostrara — en si misma — la capacidad tecnica de hacer interfaces premium. La pieza central tenia que ser una animacion hero que justificara el precio: un laptop que se abre, se eleva y se descompone en componentes etiquetados a medida que el usuario hace scroll. Sin video pesado, sin Lottie genericos, sin librerias de animacion infladas — solo frames WebP optimizados y CSS scroll-driven animations.
Restriccion clave: tenia que cargar rapido (Lighthouse 95+), funcionar en moviles sin lag y mantenerse leve. Cada componente del laptop con su etiqueta tecnica tenia que estar alineado al pixel, sin layout shift, en cualquier viewport.
La Solucion
Construimos la landing en Next.js 15 + React 19 + TypeScript + Tailwind CSS, sin librerias externas de animacion. La estetica 'Dark Precision': fondo `#080808`, acento azul electrico `#4DFFED`, tipografia arquitectonica Syne + Clash Display. Cada seccion fue diseñada para complementar la siguiente: LoadingScreen → Hero → ScrollFlipbook → PreFlipbook → SpecReveal → ParallaxSplit → FeatureCards → CTASection → Colophon.
El componente clave, ScrollFlipbook, es una animacion frame-a-frame con WebP. Extraemos los frames del MP4 maestro con ffmpeg a 24 fps, los exportamos a WebP optimizado en `public/frames/`, y los reproducimos sincronizados al scroll del usuario via IntersectionObserver + requestAnimationFrame. Sin reproducir video. Sin librerias infladas. Solo el frame correcto en el momento correcto.
Para detalles ambient agregamos AmbientParticles (canvas con particulas low-poly), CustomCursor (cursor con efecto de imán hacia elementos clicables), ScrollProgress (barra superior con porcentaje de avance), ChapterNav (navegacion lateral flotante entre secciones) y PullQuote (citas destacadas con tipografia editorial). Cada uno disenado para no robar atencion sino para dar profundidad sin gritar.
Features Clave
ScrollFlipbook Frame-a-Frame con WebP
Animacion hero: laptop cerrado a vista explotada con etiquetas tecnicas. Frames WebP de un MP4 maestro extraidos con ffmpeg a 24 fps. Reproduccion sincronizada al scroll via IntersectionObserver — sin video, sin Lottie.
Estetica Dark Precision Coherente
Fondo `#080808`, acento azul electrico `#4DFFED`, tipografia Syne + Clash Display. Cada seccion respeta el sistema visual sin desviaciones. Coherencia que vende.
AmbientParticles + CustomCursor
Particulas low-poly en canvas que reaccionan al mouse. Cursor con efecto de iman hacia elementos clicables. Detalles ambient que dan profundidad sin distraer del producto.
Navegacion entre Secciones con ChapterNav
Navegacion lateral flotante con indicadores de seccion activa. Click salta con scroll suave. ScrollProgress en la parte superior muestra el porcentaje de avance — el usuario nunca se pierde.
SpecReveal y ParallaxSplit
SpecReveal revela especificaciones tecnicas progresivamente al scroll. ParallaxSplit divide la pantalla en dos planos con velocidades de scroll distintas — efecto cinematico sin video.
Lighthouse 95+ Sin Comprometer Estetica
Sin librerias de animacion externas. Imagenes con loading lazy, frames pre-optimizados, fonts con `display: swap`. Carga rapida en moviles 4G aunque la pieza se sienta pesada visualmente.
Como se Ve
Hero con LoadingScreen y CTA Inicial
Pantalla de carga con animacion sutil → reveal del producto con tagline + CTA. Tipografia Syne grande, fondo casi negro, acento azul electrico en el CTA.
ScrollFlipbook en Accion
Laptop cerrado al inicio del scroll → conforme el usuario hace scroll, la animacion frame-a-frame muestra como se abre, eleva y descompone con etiquetas tecnicas alineadas al pixel.
FeatureCards con ParallaxSplit
Cards de caracteristicas del producto sobre un fondo dividido en dos planos con velocidades de scroll distintas. Efecto cinematico que invita a seguir bajando.
Colophon Editorial Final
Pie editorial con creditos tipograficos, ano y firma. Estetica de revista impresa traducida a web — el visitante recuerda la pieza.
Detalles Tecnicos
| Componente | Tecnologia |
|---|---|
| Framework | Next.js 15 + React 19 (App Router) |
| Lenguaje | TypeScript |
| Estilos | Tailwind CSS (sistema custom Dark Precision) |
| Tipografia | Syne + Clash Display |
| Animacion principal | ScrollFlipbook frame-a-frame con WebP |
| Pipeline de frames | ffmpeg (MP4 a WebP a 24 fps) |
| Particulas | Canvas custom AmbientParticles |
| Cursor | CustomCursor con efecto magnetico |
| Performance | Sin librerias de animacion externas. Lighthouse 95+. |
| Hosting | Vercel (estatico/SSG) |
Resultados
95+
Lighthouse score
WebP optimizados a 24 fps
Frames de animacion
Cero
Librerias de animacion externas
12+ (ScrollFlipbook, ParallaxSplit, etc.)
Componentes especializados
Landing premium / portfolio
Tipo de pieza
40+
Capturas de proceso iterativo
Servicios relacionados
¿Quieres una landing que se sienta como una pieza editorial, no como una plantilla?
Construimos landings con animaciones cuidadas, tipografia premium y rendimiento real. Sin frameworks de animacion infladas, sin compromisos en performance.