Áncora

El proyecto

Landing de una relojería ficticia: al hacer scroll el reloj se despieza en 120 fotogramas (cristal, esfera, rotor, puentes y calibre) con un rótulo para cada pieza. Sigue con las cifras del calibre, un plano técnico que se traza solo, una esfera en SVG que marca la hora real con cuatro colores a elegir y un formulario de reserva. Marca, datos, imágenes y vídeo ficticios (generados con IA).

Lo que lo distingue

Recorrido gobernado por scroll pintado en canvas, con los tramos medidos fotograma a fotograma en el propio vídeo: carga por grupos de 24, repinta el fotograma que toca y encaje distinto en vertical. El plano del calibre se dibuja con anime.js al bajar, el segundero salta 8 veces por segundo como un calibre de 28.800 a/h, y usa Magnet de React Bits y Number Ticker de Magic UI.

Tecnología

• React
• Canvas
• anime.js
• Tailwind CSS
• React Bits
• Magic UI