Lët'z Kola V2 — The city on the label
Lët'z Kola V2
$ cat stack.txt GSAP 3.13 ScrollTrigger MotionPath SCSS ES modules FR / EN / LU $ stats --short 7 Chapters 23 Screens of scroll 5 Flavours
Design, 2026
Scroll down
—Overview
Four years after the first site, Lët'z Kola is retold as one continuous story: the camera dives into the label of the bottle, the Luxembourg skyline printed on it becomes the set, and the scroll follows a returnable bottle — to the brewery in Wiltz, into the recipe, through five flavours, and back. From the redesign proposal and its storyboard to the motion and the code, in French, English and Luxembourgish.
02The front
What people see.
Every Lët'z label already carries a city. The story enters it: the bottle grows until its printed skyline fills the screen, then hands over to vector sets — the Gëlle Fra, the Adolphe Bridge, the Coque and Fort Thüngen, then the hills of Wiltz, where Brasserie Simon has been brewing since 1824.
Native scroll,
one single shot
The page never hijacks the wheel: ScrollTrigger binds one GSAP timeline to the browser's own scroll, one unit per screen height, just over 23 screens in all. The captions keep one rule — the next never enters before the last has left — checked by a script across three languages and six screen formats.
—Screens
Scroll sideways
Five flavours,
two of them new
Kola, Kola Zero, Orange, Lemon & Lime and Mirabelle & Rhubarb each take the whole screen in their own colour, with the tasting note of La Provençale's sommelier and a link to their pack in the webshop. The birds of the label fly through every chapter, five to a flock, each on its own smoothed timeline, so they keep gliding when the scroll stops.
A returnable bottle never gets thrown away. It comes back.
03The back
What keeps it standing.
$ cat stack.txt GSAP 3.13 ScrollTrigger MotionPath SCSS ES modules FR / EN / LU
- 7Chapters
- 23Screens of scroll
- 5Flavours
- 3Languages
- 45Birds in flight
- 26ES modules
- 93 kBJavaScript, GSAP included
- 0W3C errors
34 features6 modules
016 features
Story
- One GSAP timeline on the native scroll
- The camera dives into the label
- Vector sets of Luxembourg City and Wiltz
- A caption leaves before the next one enters
- Chapter navigation and progress bar
- A loader that fills the bottle
026 features
Motion
- Birds on their own timelines, 2 to 3 s of smoothing
- The bottle travels around the deposit loop
- A sugar counter typeset for each language
- The bottle follows the pointer on the home screen
- Light interface over the dark scenes
- Reduced motion: no smoothing, no tilt
036 features
Flavours
- Five flavours, each in its own colour
- Tasting notes by La Provençale's sommelier
- Each pack linked to the webshop
- Kola Zero and Mirabelle & Rhubarb marked new
- The returnable bottle's loop, station by station
- Two Luxembourg houses, one bottle
046 features
Languages & SEO
- French, English and Luxembourgish
- Pages generated from JSON locales, no text in JS
- Build stops on a missing or unused key
- JSON-LD: the brand and its five flavours
- Open Graph and hreflang on every page
- Generated sitemap
055 features
Privacy
- Nothing loaded before "Accept"
- One line in the top bar, the story never waits
- Choice kept 6 months, cookies 13 months at most
- Analytics on the live domain only
- Privacy page in three languages
065 features
Craft
- BEM, with tokens for colours, layers and flavours
- Commented ES modules and SCSS partials
- Overlap check: 3 languages × 6 formats
- Valid HTML and CSS at the W3C
- A console free of errors, signed by the brand
—Built-in quality
