A full-width pinned hero where scrolling swaps the flavor: a giant word slides across, a tilted cup spins in and the whole page re-tints, with grainy paper blobs and product cards.
## Goal Design a landing page hero for Frostly, a frozen drinks and coffee shop. Keep the tone fresh, bold and playful. Use the style, layout, image and motion rules below exactly. Replace the sample content with content that fits the goal, keeping the same sections, the same number of items in each, and similar text lengths. ## Style Keep this exactly: it is what makes the design look the way it does. The page is one big full-width hero where the whole screen takes the colour of the current flavor, with a giant flavor word, a tilted product and rough, grainy paper shapes. - Fonts, from Google Fonts: **Rozha One** for the giant flavor words only; **Fredoka** (400, 500, 600) for everything else. Text colour #1E1B16, muted #6B645A. Brand indigo #2B3A8F (hover #1F2B6E) for the logo, main button, links' underline, prices and add buttons. - **Three flavors**, each with its own set of colours that the whole page switches between: - Strawberry: page tint #FCE0E1, big disc #EF9AA0, paper blob #EDB0B1, accent #D12A2F, word colour #C9242B. - Mango: tint #FFF0BB, disc #F9C25E, blob #F5CD66, accent #E39500, word colour #F0A500. - Pistachio: tint #F1F5C9, disc #C8D586, blob #CAD36F, accent #6B8710, word colour #7C9712. - **Hero background**: the flavor tint, with a white wash over the left side (a 90deg gradient from #FFFFFF at 0% to #FFFFFF at 26% to transparent at 64%) so the text on the left stays on a clean, nearly white ground. - **Rough paper look** (draw it with SVG filters, no images): two organic blobs (hand-drawn closed curves, about circles with bumpy outlines) in the flavor's blob colour, with torn, ragged edges (feTurbulence baseFrequency 0.035, 3 octaves, feDisplacementMap scale 42) and a light sandy grain on top: feTurbulence fractalNoise (baseFrequency 0.9, 2 octaves) turned into thin, semi-transparent brown specks with an feColorMatrix of "0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 -1.1 0.62", clipped to the blob and merged over it, so the colour stays clean and only a fine texture shows (never a dark or muddy overlay); the big disc gets the same grain (baseFrequency 0.85, alpha offset 0.58); the flavor word gets a slightly rough, printed edge (displacement scale 5, baseFrequency 0.06). - Pills and buttons are fully rounded. Every focusable element shows a 2px indigo focus outline with 3px offset. - Nothing has a max-width: every part is positioned in viewport units and fills the whole width of the screen. ## Layout 1. **Nav**: 72px tall, stays pinned to the top while scrolling (z-index above everything), white at 94% with a 10px backdrop blur and a hairline shadow, side padding clamp(18px, 3.4vw, 64px). Left: a 32px indigo rounded-square logo (10px radius) with a white snowflake line icon and the brand name (Fredoka 600, 17px). Then the links Flavors, Our Story, Locations, Catering (13.5px, weight 500, clamp(16px, 2vw, 34px) apart, an indigo underline that grows on hover). Right: a "Log In" outlined pill (38px tall, 1.5px #CFCBC3 border) and a "Get the App" solid indigo pill with a soft indigo shadow. 2. **Scroll track**: below the nav, a tall box of height (100vh − 72px + 170vh). Inside it the **hero** is `position: sticky; top: 72px` with height 100vh − 72px (at least 640px) and overflow hidden, so it stays pinned while the page scrolls through the track. Everything below lives inside the hero: - **Disc and rings**: a circle in the disc colour, 52vw wide, with its centre in the bottom right (right −9vw, bottom −22vw), and two thin 1px outline rings around it (64vw and 78vw, in rgb(30 27 22 / 0.2) and 0.12). - **Blobs**: a large blob (27vw) at left 0.5vw, top 22%, behind the heading, and a smaller one (14vw) at left 25vw, top 43%. - **Flavor words**: STRAWBERRY, MANGO and PISTACHIO, each in Rozha One at clamp(62px, 12.6vw, 270px), line-height 1, on one line, centered horizontally (left 50%) at top 6%, in their own flavor word colour. They sit behind the cup. - **Cups**: three upright, transparent product images (see Images), one per flavor, each 48vw wide (square box, image contained), centered about 73vw across and 46% down, rotated -30deg so the top leans left, with a soft drop shadow (0 30px 30px rgb(30 27 22 / 0.25)). The cup is in front of the word, overlapping its right half. - **Copy** (left clamp(18px, 5vw, 96px), top 37%, max-width min(40vw, 620px)): the heading "Fuel Your Day" (Fredoka 500, clamp(34px, 3.9vw, 72px), letter-spacing -0.02em), with "Day" in the flavor's accent colour; a paragraph (clamp(13px, 1vw, 17px), max 29em); and two buttons 20px below: "Order Now" (42px tall, solid indigo, white text, soft indigo shadow) and "Find Store" (outlined in the accent colour, white at 60% fill, fills with the accent on hover). - **Product cards**: three white cards (radius 16px, 8px padding, soft shadow) in a row at left clamp(18px, 5vw, 96px), bottom 5%, gap clamp(14px, 1.6vw, 28px), each clamp(150px, 12.6vw, 230px) wide: a photo (1 : 0.92, 11px radius), a name (Fredoka 600), a two-line muted description (10 to 11.5px), and a row with the price in indigo (600) and a 28px round indigo "+" button that turns into a white check on a button filled with the flavor's accent colour when pressed. - **Progress dots**: a vertical stack of three dots at the right edge (right clamp(14px, 2vw, 36px), vertically centered), 10px circles at 28% ink; the current one is a 10 × 34px pill in solid ink. Each dot is a button that scrolls to its flavor. - **Scroll hint**: at the bottom center, the word "Scroll" (11px, uppercase, letter-spacing 0.28em) above a 34px line that keeps drawing downward; it fades out after the first scroll. 3. There is nothing below the track: when you reach the end, you see the Pistachio state. Under 1000px wide: the nav links hide and the third card hides. Under 760px wide: the nav is 64px tall and only "Get the App" shows; the word is 15.2vw; the cup is 92vw wide at left 4vw, top calc(27% − 46vw); the copy sits at left and right 20px, top 48%, with a 34px heading; the cards are one scrollable row of all three cards again (150px wide, no descriptions, photos 1 : 0.7) at the bottom with 20px side margins; the white wash becomes vertical (a 180deg gradient from transparent at 30% to white at 94% opacity at 54%); the disc is larger and lower (112vw wide, right −30vw, bottom −26vw), the large blob becomes 54vw wide at left −12vw and sits behind the heading only, its bottom edge 44px below the top of the copy (top calc(48% + 44px − 54vw)), so the paragraph and buttons stay on the clean white wash, the rings and the small blob hide, the dots shrink and the scroll hint hides. The hero still stays pinned. ## Motion - **The page is driven by scrolling, not by a carousel.** Scrolling through the track moves a single number from 0 (Strawberry) to 1 (Mango) to 2 (Pistachio): the first flavor change takes about 85vh of scrolling, the second another 85vh. Read the scroll position with a passive scroll listener and glide towards it (each frame, move 14% of the remaining distance), so the motion feels smooth but always follows the scrollbar, forwards and backwards. - From that number, everything is placed continuously: each word slides horizontally by (its index minus the number) × 105vw, so as you scroll the current word slides out to the left while the next one slides in from the right; each cup moves horizontally by (index minus number) × 42vw, is rotated by -30deg + 60deg × (index minus number), so a cup arriving from the right comes in turned clockwise and settles at -30deg, shrinks to 78% when away, and fades out as it leaves (opacity 1 minus 1.5 times the distance) so two cups cross-fade at the halfway point. - The page tint, disc, blobs, heading accent and the outlined button swap to the nearest flavor's colours when the number passes the halfway point, with plain CSS transitions of 900ms on background-color, fill, color and border-color (the white wash is a fixed gradient and does not change; do not use @property). - **Dots** show the current flavor and scroll smoothly to a flavor when clicked. Announce the current flavor name to screen readers. - **Load-in**: the heading, paragraph, buttons and cards fade in and rise 20px over 900ms, staggered 110ms apart. - **Hover**: cards lift 6px and zoom their photo to 1.07; buttons lift 2px; the add button grows to 1.12. - **Reduced motion**: with prefers-reduced-motion: reduce, show everything at once, follow the scroll without gliding and swap colours instantly. ## Sample content - Brand "Frostly" with the nav links Flavors, Our Story, Locations, Catering, and the buttons Log In and Get the App. - Flavor words and names: Strawberry, Mango, Pistachio. - Heading "Fuel Your Day". Paragraph "Hand-blended frozen drinks and freshly brewed coffee for every mood. Every cup tells a story." Buttons "Order Now", "Find Store". - Cards: "Caramel Latte" (Steamed milk, vanilla syrup and a ribbon of warm caramel.) $4.95; "Classic Espresso" (A bold double shot, roasted dark and pulled slow.) $3.45; "Autumn Spice Latte" (Cinnamon, nutmeg and clove under a cloud of cream.) $5.25. ## Images Every image slot below must show a real image, never an empty box or emoji. Each slot has an image prompt in **Image prompts** at the end of this prompt. The cups carry an original small square indigo sticker with a snowflake icon: do not use any real company's logo. 1. If you can generate images, generate one for each slot from its image prompt. For the three cups, remove the cyan background afterwards (and keep the clear lid see-through) so each is a transparent PNG. 2. Otherwise, load each slot's image from the file name given below (in an `images/` folder next to the page), so the user can generate the images from the image prompts and drop them in. The card photos sit on a warm brown gradient (#E8D6BD → #C9A57D) until they load; the cup slots simply stay empty until their files exist. Slots: - Cups, transparent PNGs: `images/cup-strawberry.png`, `images/cup-mango.png`, `images/cup-pistachio.png`. - Card photos, cropped to cover: `images/card-latte.jpg`, `images/card-espresso.jpg`, `images/card-spiced.jpg`. ## Output A single self-contained HTML file with CSS in a `<style>` tag and vanilla JavaScript in a `<script>` tag. The only external files allowed are the two Google Fonts and the images above; no libraries or frameworks. Designed for a 1440 × 900 screen, filling the full width of any screen, and responsive down to 375px wide, with semantic HTML (a header with a nav, a main landmark, a labelled hero section, real buttons and articles for the cards). ## Image prompts Use these with any image generator, all at aspect ratio 1:1. Keep each image free of text and logos. - **cup-strawberry.png**: Studio product render. A tall clear plastic cup with a domed clear lid and a thick deep indigo-blue straw, standing upright and centered, filled with a thick blended frozen strawberry drink in pink, topped with whipped cream, a drizzle of strawberry sauce and red berry crumbs. On the front of the cup a small square deep indigo-blue sticker with rounded corners and a simple white snowflake icon, no letters. Soft studio lighting, glossy, crisp detail. Isolated on a plain solid pure cyan background (#00FFFF), no shadow, no reflection, no text. - **cup-mango.png**: Studio product render. A tall clear plastic cup with a domed clear lid and a thick deep indigo-blue straw, standing upright and centered, filled with a thick blended frozen mango drink in golden yellow-orange, topped with whipped cream and a drizzle of mango sauce. On the front of the cup a small square deep indigo-blue sticker with rounded corners and a simple white snowflake icon, no letters. Soft studio lighting, glossy, crisp detail. Isolated on a plain solid pure cyan background (#00FFFF), no shadow, no reflection, no text. - **cup-pistachio.png**: Studio product render. A tall clear plastic cup with a domed clear lid and a thick deep indigo-blue straw, standing upright and centered, filled with a thick blended frozen pistachio drink in pale green, topped with whipped cream and crushed pistachios. On the front of the cup a small square deep indigo-blue sticker with rounded corners and a simple white snowflake icon, no letters. Soft studio lighting, glossy, crisp detail. Isolated on a plain solid pure cyan background (#00FFFF), no shadow, no reflection, no text. - **card-latte.jpg**: Photograph. A glass cup of caramel latte with a creamy foam top and caramel drizzle on a small saucer, a little steam, warm cafe lighting, a wooden table, soft bokeh background, no text, no logos. - **card-espresso.jpg**: Photograph. A small white espresso cup on a saucer on a bed of roasted coffee beans, steam rising, moody warm lighting, soft bokeh background, no text, no logos. - **card-spiced.jpg**: Photograph. A ceramic mug of spiced latte with whipped cream and cinnamon sticks among autumn leaves, warm string-light bokeh in the background, cozy, no text, no logos.
