Réplicas de estudio · 2026

Doce sitios,
reconstruidos cuadro a cuadro.

Dos videos de referencia relevados fotograma por fotograma, 77 capturas de storyboard y doce landings estáticas escritas a mano en HTML, CSS y JavaScript. Cinco llevan objetos 3D construidos con geometrías primitivas en three.js.

  • 12sitios completos
  • 5con 3D en three.js
  • 2videos relevados cuadro a cuadro
  • 141páginas de documentación

Scrolleá para atravesar el muro

Índice

Los doce, con su ficha técnica.

Cada sitio replica una landing distinta de los videos de referencia. La firma de movimiento, las tipografías y la paleta son las que están efectivamente en el código de cada carpeta.

12 de 12 sitios

    Método

    Cómo se hizo.

    1. 01

      Relevamiento cuadro a cuadro

      Los dos videos se recorrieron fotograma por fotograma: 77 capturas de storyboard y dos documentos de relevamiento con la estructura, los textos legibles, la tipografía aproximada y la mecánica de cada animación. Lo que el video no mostraba quedó marcado como inferido; lo que se dedujo de cuadros sueltos, como [Probable].

    2. 02

      Brief por sitio

      De cada relevamiento salió un PROMPT.md autosuficiente —concepto, marca, estructura sección por sección, textos, escala tipográfica, paleta y animaciones con sus rangos— y una síntesis del lenguaje visual común a los doce.

    3. 03

      Construcción

      HTML, CSS y JavaScript sin frameworks, un sitio por carpeta. El movimiento ligado al scroll usa animation-timeline con fallback en JS; lo disparado usa expo-out cubic-bezier(.16,1,.3,1). Los cinco objetos 3D se armaron con geometrías primitivas en three.js, sin modelos importados.

    4. 04

      Verificación con capturas

      Cada sitio pasa por un comprobador con Playwright que saca capturas a 1440 y 390 px en cinco puntos de scroll más una pasada en prefers-reduced-motion, y reporta errores de consola y overflow horizontal. Las capturas se miran y se corrige hasta que cierran.

    Nota honesta. Son réplicas de estudio hechas para aprender a leer y reconstruir sistemas de diseño ajenos. Las marcas, los productos, las personas y los datos son ficticios; no son trabajos de clientes ni diseño original. Lo que sí es propio es la reconstrucción: el código, la documentación y las decisiones donde el video no alcanzaba. La versión propia es la pasada anterior, hecha con criterio propio y sin copiar las referencias.