Web
Concept, design and build
Burger house scroll story
A concept site where a burger rotates, bursts apart and is rebuilt layer by layer as you scroll, followed by a full-screen menu with an animated add-to-cart.
Stack: HTML, CSS, JavaScript, GSAP, Lenis, Motion, Python
Problem
A food site usually shows a photo and a menu. This one makes the build of the burger the story, without a framework or a build step.
What I built
- Pinned, reversible scroll-scrubbed assembly stage with GSAP ScrollTrigger and Lenis; the camera dives into a macro cheese melt past editorial quotes.
- A Python pipeline (Pillow, numpy) that cuts seven layers from a single source image, with alpha crossfades, hue cleanup and reconstructed top faces.
- Canvas particles for steam, sesame confetti and a rain of fries.
- Menu with prices flying into the cart, a magnetic CTA and spring micro-interactions.
- No build step and fully offline; a bundler script inlines everything into one HTML file.
- Reduced motion shows the assembled burger with fades; minimap and menu work by keyboard, with Esc and focus restore.
Stack
- HTML
- CSS
- JavaScript
- GSAP
- Lenis
- Motion
- Python
Share this case