REFERENCE
- Gallery page: https://magpui.com/en/i/iced-coffee-flavor-picker-hero-197ae4
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/iced-coffee-flavor-picker-hero-197ae4/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/iced-coffee-flavor-picker-hero-197ae4/clip.mp4
- Original post: https://kuro-coffee-template.modulify.website by Modulify
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Iced latte cups: Studio product render of a clear plastic iced latte cup with ice and visible caramel swirl, sitting on a small mound of ground coffee, warm rim light, transparent or plain background, front view, 3:4. Make variants: original, caramel, hazelnut, mocha, cinnamon
- Floating ingredients: Single cinnamon stick, vanilla flower, hazelnut, caramel cube and chocolate piece, each isolated, warm studio lighting, slight motion blur, transparent background, 1:1
BUILD
A complete coffee brand landing page whose hero is a pinned flavor picker: a single iced latte cup sits on a mound of ground coffee, and scrolling swaps it through six flavors (Original, Caramel, Hazelnut, Mocha, Cinnamon...) while matching ingredients float around it. Below, a warm cream story section, stats and a dark menu section.
DESIGN SYSTEM
- Hero background radial gradient #6B3A1A center to #160C07 edges; story section #F1E9DE; menu section #1E120B.
- Headline 'Choose your coffee' in a soft serif, 64px, white; flavor name 28px serif above a small price pill (white, radius 10px).
- Counter '01' to '06' bottom left, 14px.
- A caramel #C98A4B marquee strip with flavor names in serif 22px, separated by small coffee bean icons.
- Floating glass nav pill (blurred, #FFFFFF14, radius 999px) with icon buttons and a 'Join the list' button.
MOTION
- Pinned for 6 x 100vh: at each step the cup crossfades to the next flavor (opacity + scale 0.96 to 1, 500ms cubic-bezier(0.22, 1, 0.36, 1)); the flavor name slides up 20px.
- Ingredients (cinnamon, vanilla, hazelnut, caramel, chocolate) float with independent slow sine motion (8-12px, 4-7s) and swap with the flavor.
- Marquee moves left at 40px/s, pauses on hover.
- Stats count up from 0 when in view, 1200ms.
SECTIONS
1. Pinned flavor picker hero (6 flavors).
2. Flavor marquee strip.
3. Story: single coffee bean image left, 'Kuro means black. The rest is up to you.' right.
4. Stats row and a floating '7 days' badge card.
5. Dark menu: 'Six iced lattes. One perfect shot.' with flavor cards.
6. Signup CTA and footer.
IMPLEMENTATION
- GSAP ScrollTrigger pin with snap to each flavor; images preloaded so swaps never flash.
- Cups and ingredients are transparent PNG/WebP layers over the CSS gradient.
- prefers-reduced-motion: show every section in its final state, no scroll-driven movement.
- Visible focus rings on every link and button; all nav reachable by keyboard.
- Lazy-load images below the fold, animate only transform and opacity.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders or the generated images listed separately.
SUCCESS CHECK
- Scrolling the hero steps through every flavor and snaps to each one.
- The cup never shows a blank frame while swapping.
- The marquee and floating ingredients stop with reduced motion.
