Ice cream shop · Light

Scoop

Packaging pop: a stamped 3D tub travels down the page over bubblegum-pink and chocolate backgrounds, spins, has its label peeled off into a strip, and everything around it is a collage of papers, rounded-corner photos and giant condensed titles.

Palette

--pink#F568B2
main background of the hero and manifesto sections, logo
--choco#391811
brown background, titles, tub lid, footer
--cream#F3E7D6
menu paper, logo outline, light buttons
--red#C41D31
background of the red flavor section (darkened for cream text 4.8:1)
--purple#582780
background of the purple flavor section
--green#7CC243
green background strip and green flavor
--yellow#F9BA1F
details, stickers, photo backgrounds

Typography

Display: extra-black (900) condensed grotesque in uppercase, tracking -0.01em, line-height 0.88; 2-line titles at clamp(64px, 11vw, 180px) — suggestions: Anton / Big Shoulders Display Black
Logo/brand: round, inflated letters with a cream outline and dripping "drops" — suggestions: Lilita One / Fredoka 700 with an outline via paint-order stroke
Body: grotesque 500, 12–14px, line-height 1.4, --choco or cream color depending on the background — suggestions: Space Grotesk / Archivo
Treatments: loose letters that fall with physics and assemble the word; "ransom note" cut-out text (missing letters that complete on scroll); giant semi-transparent flavor name behind the tub; two-word phrase with a photo fitted between them

Sections

Fixed seal — cream ribbon in the top-right corner like a wax seal that opens the menu.
Intro — inflated logo centered on pink, with red/yellow arcs rising from the base.
Hero — small line with the logo in the middle + 2-line condensed title assembled by falling letters; pink background with a brown curve below; 3D tub on the curve.
Paper menu — the pulled seal reveals a cream sheet with 4 giant condensed links.
Collage — chocolate background with papers (shopping list, ticket, paper bag with cut-out letters, stickers) around the tub.
Label strip — the tub's label peels off and becomes a stamped diagonal strip that crosses the screen with a phrase in a pill, revealing the green flavor background.
Flavors (pin) — for each flavor, its own background color, tub spinning in the center with its lid, giant translucent name below, 4 rounded square photos around it, short text and button on the left, spinning circular order badge, column of miniature tubs on the right as a selector.
Moments — pink background, giant 2-word phrases with a square photo fitted in the middle, in sequence.
Delivery/stores — rounded card with a photo of a person holding the tub and a brown card with text and 2 buttons.
Footer — brown, menu in a row, large logo, pink closing title, floating social icons and tubs/spoons falling and stacking up with physics.

Motion and interaction

Traveling tub: scroll scrub → a single 3D tub (Three.js/R3F) descends between sections, spins on Y and tilts; GSAP ScrollTrigger + Lenis.
Letters with physics: load/scroll → title letters drop from above and bounce until they fit in place (GSAP with "bounce.out" ease or Matter.js).
Peeling label: scroll scrub with pin → the label texture unrolls from the cylinder and becomes a plane in a diagonal strip (curl shader or deformed mesh).
Flavor swap: scroll with pin → background changes color (background tween), label texture swaps and the giant name rises via a mask.
Ransom note: scroll → missing letters of a phrase appear one by one in random positions until complete.
Spinning badge: continuous → circular badge rotates 360° in 12s.
Menu seal: click/drag → the ribbon comes down and the cream sheet slides in from above with a slight rotation.
Tub rain: scroll in the footer → tubs and spoons fall with 2D physics (Matter.js) and stack up; draggable with the cursor.

Components

Seal: 90×40px cream ribbon with a serrated edge at the base and a dotted line, 10px condensed text.
Light button: cream pill with a 1.5px --choco border, 10px uppercase text.
Sticker photo: square with 18px radius, flat colored background, slight ±6° rotation.
Circular badge: 80px, text on a circle + spoon icon in the center.
Flavor selector: column of 36px miniature tubs, active one at scale 1.2.
Collage paper: PNG elements with a short shadow 0 4px 0 rgba(0,0,0,.15) and rotation.
Stamped strip: 160px height, rotation -6°, repeated pattern + cream pill with a condensed phrase.