Web
Concept, design and build
Premium ice cream brand
A concept site for a small-batch ice cream brand told through scroll-scrubbed video: the hero cone tumbles into the first flavour card and a sundae builds itself scoop by scoop.
Stack: HTML, CSS, JavaScript, GSAP, Lenis, ffmpeg
Problem
Video-heavy scroll stories break easily. A blocked CDN, a slow phone or a reduced-motion setting can leave a blank page. This one had to look rich and never fail empty.
What I built
- Vanilla HTML, CSS and JS with GSAP ScrollTrigger and Flip, and Lenis synced to the GSAP ticker.
- Hero cone video autoplays for 2.8 s, then scroll-scrubs; on desktop a Flip hand-off lands it as flavour card 01.
- Pinned horizontal pint gallery and a pinned build-your-box sequence where a sundae assembles, then melts.
- Scrubbed videos re-encoded with a keyframe every 3 frames; the last frame is extracted as a hand-off still to avoid flicker.
- Three layers of resilience: the intro lock is added by script only, a static fallback runs if GSAP is missing, and 6 s and 9 s watchdogs release the page.
- gsap.matchMedia() tears pins down cleanly at 1024 px; reduced motion swaps everything for stills.
Proof
- Text contrast raised from 1.68:1 to 7.3:1
- 44 px targets under pointer: coarse
Stack
- HTML
- CSS
- JavaScript
- GSAP
- Lenis
- ffmpeg
Share this case