Spylt.
A little more flavour. A lot more character.
GSAP-powered caffeinated milk brand site with four flavour worlds and a scroll-animated showcase.
- Client
- Concept Project
- Industry
- F&B / Beverages
- Engagement
- Build
- Relationship
- An independent studio exploration — not a client commission
The brief.
Create a bold, flavour-forward landing page for a caffeinated milk drink brand with four flavours — chocolate, strawberry, oreo, and vanilla. The site needed to feel energetic and premium, with scroll-driven transitions between flavours that make each one feel like its own world.
Our response.
We built a scroll-animated brand site using Vite + React 19 and GSAP. Each flavour gets its own animated section with colour-themed transitions, product reveals, and kinetic typography. GSAP ScrollTrigger drives the entire experience — section pins, flavour switches, and text animations all sync to scroll position for a fluid, addictive browsing experience.
- Web Development
- Scroll Animation
- Creative Direction
- Brand Showcase
Brick by brick.
- Course 01
Flavour-Driven Sections
Designed distinct colour-themed sections for each flavour — chocolate (rich brown), strawberry (vibrant pink), oreo (dark + cream), vanilla (warm cream) — each with its own personality.
- Course 02
GSAP Scroll Choreography
Used ScrollTrigger to pin sections, animate product reveals, and transition between flavours with smooth colour morphs synced to scroll position.
- Course 03
Kinetic Typography
Animated flavour names, taglines, and product descriptions with GSAP text effects that respond to scroll velocity and direction.
- Course 04
Vite + React 19
Built on Vite for instant dev cycles and optimized production builds, with React 19's latest features for clean component architecture.
What it became.
- Flavours
- 4
- Chocolate, strawberry, oreo, vanilla
- Animation
- GSAP
- ScrollTrigger-driven flavour transitions
- Framework
- Vite + React 19
- Fast builds, modern React
- Experience
- Scroll-animated
- Pinned sections with colour morphs
Project scope and implementation details from Edifio’s case study.
Schedule of materials.
- 01Vite
- 02React 19
- 03GSAP
- 04TypeScript
