STACKD

Build "STACKD", a scroll-driven site for a smash-burger restaurant. Next.js 16 + raw three.js + GSAP ScrollTrigger + Lenis + Tailwind v4. Warm, appetising and professional — cream, kraft, tomato red, mustard, dark bun brown; Bricolage Grotesque display with Instrument Serif italic accents, DM Sans body, DM Mono labels.

Hero object: one burger ("HAMBURGER" by rodrigogelmi, CC-BY). The source is three meshes (bread, meat, ingredients) whose pieces are solid separate islands, so the build script converts spec/gloss → metal/rough, splits the buns by island and labels every ingredient island by where its UVs land in the texture atlas → nine layer meshes: bun_bottom, lettuce, patty, cheese, sauce, tomato, onion, pickle, bun_top. Meshopt + WebP, 1.6 MB.

Packaging is procedural: a kraft clamshell made from a 4-sided lathe (flared tray) for base and lid, the lid hinged on the back rim, canvas kraft texture with fibres, the brand printed on the lid in the page's webfont, a slogan on the front wall, and a two-half seal sticker folded over the seam.

Scroll model is "state targets": each section sets {x, y, size, turn, spin, tilt, explode, pack}; the scene damps toward them. Section triggers use the pin-spacer.
1. Hero (cream): after the loader the nine layers drop onto the plate one by one with a bounce; giant tomato-red wordmark behind; "Smashed. Stacked. packed hot."; mustard ticker on a tilt.
2. The build (dark, pinned, long): layers pull apart vertically; HTML callouts follow each projected layer; a list walks the stack crown → heel (phones show only the active row). Keep scrolling: the layers restack, the copy swaps to "Then it's boxed hot.", the kraft box rises under the hovering burger, the burger dips and drops in (squash on landing), the lid slams shut with a bounce, steam escapes, the seal stamps on, and Stack / Box / Seal / Ride light up.
3. Menu (cream): filter chips, eight dish cards with photo, price in ₹, veg / non-veg marks.
4. Delivery (tomato, short pin): the sealed box turns as a product shot beside delivery facts and order CTAs.
5. Story (dark): grill film opens from a rounded frame to full bleed while the manifesto lights up; stats count up; three kitchen photos with parallax.
6. Visit (cream): three locations, table-booking form (local confirmation only).
7. Footer (tomato): giant wordmark, credits.