Product landing page · 2026
Áncora
An automatic watch that takes itself apart piece by piece as you scroll.
The project
Landing page for a fictional watchmaker: as you scroll, the watch comes apart over 120 frames (crystal, dial, rotor, bridges and movement) with a caption for each part. Then the movement in numbers, a technical drawing that draws itself, an SVG dial showing the real time in four colours, and a reservation form. Fictional brand, data, images and video (AI generated).
What makes it stand out
Scroll-driven sequence painted on canvas, with the segments measured frame by frame from the video itself: loaded in groups of 24, always repaints the right frame and fits differently in portrait. The movement drawing is traced with anime.js on scroll, the seconds hand jumps 8 times per second like a 28,800 vph calibre, and it uses React Bits' Magnet and Magic UI's Number Ticker.
Technology
- React
- Canvas
- anime.js
- Tailwind CSS
- React Bits
- Magic UI
↓What it looks like as you scroll
