Built this watch disassembly landing page interaction with @juliusai using one prompt.
The prompt:
“Build a product marketing landing page interaction using the images in the ZIP. Map them to scroll progress with a sticky 100vh canvas and smooth crossfading/image-sequence interpolation.
Scrolling down should assemble the watch. Scrolling up should reverse the sequence and disassemble it.
Use React, HTML Canvas, GSAP + ScrollTrigger, and 40–60 WebP/AVIF frames.
Structure:
WatchAssemblySection
├── StickyCanvas
├── FramePreloader
├── ScrollProgressController
├── ResponsiveTextContent
└── ReducedMotionFallback
Use a 500vh scroll section with a sticky full-screen canvas.”
One prompt. That was basically it.
더 보기
