A pink floral, 3D-render style hero where frosted glass panels, candle cards and a curved scent panel float over a blush flower field, with melted wax dripping off every edge.
## Goal Design a landing page hero for Petalwick, a hand-poured floral candle atelier. Keep the tone soft, romantic and calm. Use the style, layout, image and motion rules below exactly. Replace the sample content with content that fits the goal, keeping the same panels, 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 floating 3D scene in a pink floral mood: frosted mauve-pink glass panels hover over a blush flower field, and soft pink wax drips off their bottom edges. - Fonts, from Google Fonts: **Fraunces** (300, 400, and 300 italic) for headings, product names and the panel title; **DM Sans** (400, 500, 600) for everything else. - Colors: text on glass #FFFFFF, dimmed text rgb(255 255 255 / 0.8), faint text rgb(255 255 255 / 0.56), rose #F48FB1, light rose #FFD1E1, deep rose #C2547F. - Page backdrop, fixed behind everything and always covering the whole window: a vertical sky gradient #E9BCD6 at the top → #F3C9DA at 24% → #F9D9DF at 46% → #FBE3E3 at 58% → #F6D2DC at the bottom, plus a soft peach haze (an ellipse of rgb(255 222 200 / 0.85) fading out, centered at 70% across and 40% down). Over the bottom 52%, three layered rolling hills drawn as SVG waves in #F8DDE6, #F3CCDA and #ECB8CB, dotted with blurred bokeh circles in white and pinks (#FFF2F6, #FBD0DE, #F7A9C5, #F59CBC) like an out-of-focus flower field, and a faint rose vignette at the edges. If there is a scene photo (see Images), it covers the whole backdrop. - **Glass panels**: background linear-gradient(155deg, rgb(150 86 118 / 0.4), rgb(104 52 82 / 0.24)), a 1px border rgb(255 236 244 / 0.5), backdrop-filter blur(18px) saturate(1.3), shadow 0 30px 60px -20px rgb(120 40 80 / 0.4) plus 0 8px 18px rgb(120 40 80 / 0.16), an inset 1px white highlight along the top edge, and a sheen overlay (135deg, white at 30% fading out by 28%). Radius 2cqw on the hero (about 29px at full size), smaller on cards. - **Wax drips**: under the hero card, each quick-link pill, each product card, the Discover button and the scent panel, a thin band of melted pink wax (about 8px) runs along the flat part of the bottom edge, tapering away into the rounded corners, with 1 to 5 drips hanging from it. Each drip has a narrow neck that swells into a round bulb at the end, 18 to 60px long and 10 to 28px wide, filled with a vertical gradient #FFE0EA → #F7A6C2 (30%) → #D2668F, with a white highlight stripe down the neck, a white glint on the bulb, and a soft rose drop shadow. Draw them as SVG paths generated in JavaScript from each panel's real width, so they stay attached when the layout resizes. - **Buttons**: the Discover button is a light glass pill (white-to-pink glass, 1px border, inset white top highlight) that lifts 2px with a soft light-rose ring on hover. - Every focusable element shows a 2px light-rose focus outline with 3px offset. ## Layout Build one scene "stage" that spans the full page width on a 16:10 screen: width min(100%, 160vh), aspect ratio 1440 / 900, centered in the window, so on wider screens it fits the screen height and the backdrop fills the sides. Size everything inside it relative to the stage width with container query units (1cqw = 1% of the stage width), so the whole composition scales as one. Elements are absolutely positioned and overlap like a 3D render. Positions below are percentages of the stage (left, top, width, height). 1. **Hero card** (6%, 4%, 52% × 50%): a large glass panel. Inside, at the top, a nav bar: on the left a small glowing pearl (a 1.5cqw glossy white-pink sphere) and the brand name (DM Sans 500, 1.15cqw); on the right the links Home (current, brighter), Shop, Journal, Contact (1cqw, dimmed), then a two-line menu icon with the second line shorter. Then, 5.2cqw below, the heading in Fraunces 300, uppercase, 4.4cqw, line-height 1.04, letter-spacing 0.02em, on two lines; one word on the second line is set in Fraunces 300 italic, lowercase, in light rose. Under it a 1.2cqw dimmed tagline (max 30cqw wide), and at the bottom left the Discover pill with two small drips. The card itself has five drips. 2. **Quick links** (63%, 9%, 18% wide): a column of three glass pills, 2.2cqw apart. Each pill has a 3.3cqw round icon badge on the left (a glossy pink glass circle with a light border, a soft pink glow and a white line icon) and a 1.2cqw label. One drip each. On hover a pill slides 0.6cqw left and its border turns light rose. 3. **Product cards** (15% × 28% each): card 1 at (10%, 48%), card 2 at (26.5%, 44.5%), card 3 at (19.5%, 72.5%), so they stagger and overlap slightly. Each is a glass card (1.7cqw radius, 1cqw padding), centered text: a small glowing white dot in the top-right corner; an image window (full width, 1 : 0.8, 1.2cqw radius, light border, a soft pink radial background, inner shadow) showing the product; the product name in Fraunces 400, uppercase, 1.1cqw, letter-spacing 0.06em; the price in light rose, DM Sans 500; and at the bottom an arrow link row separated by a hairline, whose arrow slides right on hover. One or two drips each. 4. **Scent panel** (44%, 52%, 44% × 34%): a wide glass panel bent away from the viewer to look curved, using perspective 1400px and rotateY(-17deg) rotateX(3deg), with an extra light streak along its left edge. Inside, two columns (30% / rest): a side menu of three items with small line icons, the first highlighted as a glass pill; and an inner darker glass box (rgb(90 34 64 / 0.28), 1.5cqw radius) holding a Fraunces 1.8cqw title with a small label on the right, then three real `<input type="range">` sliders with labels and live numeric values. The middle slider sits in its own lighter glass row and shows a small light-rose chip instead of a number. Slider tracks are 4px, rgb(255 255 255 / 0.22), filled up to the thumb with a light-rose → rose gradient; thumbs are 1.1cqw glossy white circles with a soft pink ring. Three drips. 5. **Glass flower sculptures and floating props**: a large translucent glass peony at the bottom left (-2%, 60%, 17% wide) and a glass five-petal cherry blossom at the bottom right (right 1%, top 72%, 12% wide). See Images: use generated glass sculptures if you can, otherwise draw them in SVG as layered petals with white-to-pink translucent radial gradients, white 1.5px outlines, small white glints, a pale cream center and two translucent mint leaves on the peony. Plus four floating iridescent glass bubbles (white specular highlight top-left, faint pink and lilac rims, light backdrop blur), the biggest (8% wide) just above the quick links and one (6.5%) overlapping the hero's lower left corner; three small glossy pearls; and six small pink petals (a leaf shape with border-radius 0 75%, white-to-pink gradient) scattered around the scene. Stacking order, back to front: the two glass flowers, then the hero card, quick links, product cards and scent panel, then the bubbles, pearls and petals. The glass flowers must never cover a panel's text. On screens under 820px wide, drop the absolute positioning: the stage becomes a full-width two-column grid (16px padding, 26px row gap, 14px column gap) with the hero card full width (min 340px tall, nav links hidden), the quick-link pills wrapping in a row, product cards two per row with the third centered at half width, and the scent panel full width, flat (no rotation) and stacked (side menu as a row of pills above the sliders). Hide the glass flowers, small bubbles, pearls and petals, and switch the cqw sizes to fixed px sizes. ## Motion Easing for everything: cubic-bezier(0.22, 1, 0.36, 1). - **Float**: the quick-link pills, the product cards and the bubbles and pearls bob up and down by 0.9cqw, each on its own loop between 5.5s and 9s with different delays, so nothing moves in sync. - **Petals**: each petal drifts about 1.2cqw sideways and 1.4cqw up while turning 40deg and back, on its own 9s to 14s loop. - **Falling wax**: from three of the longest drips (two on the hero card, one on the scent panel), a droplet swells at the tip and falls about 8cqw while fading out, every 6 seconds, staggered. - **Parallax**: moving the mouse shifts every layer in the opposite direction by a few pixels, more for elements nearer the front: hero 6, scent panel 8, quick links 10, cards 14, bubbles 12 to 18, flowers 20 to 22, petals 26 (pixels at the screen edge), easing over 600ms. Ignore touch. - **Sliders**: dragging updates the filled track and the number live. - **Reduced motion**: with prefers-reduced-motion: reduce, turn off floating, drifting petals, falling wax and parallax. ## Sample content - Brand "Petalwick" in the nav. Heading "Petalwick" on the first line and "_candle_ Atelier" on the second, with "candle" in italic light rose. Tagline "Hand-poured candles that smell like a garden in bloom." Button "Discover". - Quick links, with icons: "Collections" (a flower), "Scents" (three wavy lines), "Gifting" (a gift box). - Products: "Peony Bloom, $34.00", "Rose Petal, $38.00", "Cherry Blossom, $32.00". - Scent panel: side menu "Atelier" (a map pin, current), "Scents" (wavy lines), "Rituals" (a candle). Title "Scent Profile", label "Your blend". Sliders "Floral" 78, "Intensity" 40 with the chip "Soft", "Sweetness" 52. ## 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. 1. If you can generate images, generate one for each slot from its image prompt. 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. Draw a fallback under every image so the page looks finished before the files exist, and hide the fallback once its image loads: - Scene: the drawn sky, hills and bokeh from **Style**. - Products: an inline SVG frosted glass candle jar (rounded rectangle with a white translucent gradient and white outline) filled with pink wax in the product's shade, a wick with a soft glowing flame, a small white label band, and two little five-petal flowers beside it, on the window's pink radial background. - Glass flowers: the SVG glass peony and glass blossom from **Layout**. Slots: - Scene, `images/scene.jpg` (optional, the drawn backdrop shows without it): covers the whole page backdrop. - Product 1, Peony Bloom, `images/candle-peony.jpg`: fills the card's image window (1 : 0.8, cropped to cover). - Product 2, Rose Petal, `images/candle-rose.jpg`: same. - Product 3, Cherry Blossom, `images/candle-blossom.jpg`: same. - Glass peony, `images/glass-peony.png`, and glass blossom, `images/glass-blossom.png`: transparent PNGs shown over the drawn flowers in the bottom corners (object-fit: contain). ## 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 its full width, and responsive down to 375px wide, with semantic HTML (a heading for the hero, nav landmarks, articles for products, labelled sliders). ## Image prompts Use these with any image generator. Keep each image free of text and logos. For the two glass flowers, remove the white background afterwards so they are transparent PNGs. - **scene.jpg** (16:9, at least 1920 × 1080): Wide 16:9 landscape photograph, dreamy pastel golden-hour still life. A soft field of blush-pink peonies, ranunculus and cherry blossoms in the lower third, very shallow depth of field so the flowers melt into creamy bokeh, under a hazy sky that fades from pale peach near the horizon to soft rose pink and lavender at the top. A few loose pink petals floating in the air, gentle light leaks and soft glow. The whole center and upper middle of the frame is empty soft-focus sky with no objects, leaving clean space for overlaid interface panels. Calm, romantic, premium. No text, no logos, no people, no UI. - **candle-peony.jpg** (1:1): Square studio product photograph. A frosted glass candle jar filled with soft blush-pink wax, a lit candle with a small warm flame, a minimal blank white label band, no text. Two fresh pink peonies beside it. Soft blush-pink gradient background, gentle glow, soft shadow, centered, the jar filling about 55% of the frame. Dreamy, premium, calm. No text, no logos. - **candle-rose.jpg** (1:1): Square studio product photograph. A frosted glass candle jar filled with deep rose-pink wax, a lit candle with a small warm flame, a minimal blank white label band, no text. Scattered rose petals around it. Soft rose-to-blush gradient background, gentle glow, soft shadow, centered, the jar filling about 55% of the frame. Dreamy, premium, calm. No text, no logos. - **candle-blossom.jpg** (1:1): Square studio product photograph. A frosted glass candle jar filled with very pale pink wax, a lit candle with a small warm flame, a minimal blank white label band, no text. A sprig of cherry blossoms beside it. Soft pale-pink to cream gradient background, gentle glow, soft shadow, centered, the jar filling about 55% of the frame. Dreamy, premium, calm. No text, no logos. - **glass-peony.png** (1:1, transparent background): A single peony flower sculpted from translucent iridescent glass, soft pink and clear glass petals with white specular highlights and subtle rainbow refraction, two clear glass leaves, a pale golden center. 3D render, studio lighting, glassmorphism style. Isolated, centered, on a plain solid white background. No text. - **glass-blossom.png** (1:1, transparent background): A single five-petal cherry blossom sculpted from translucent frosted pink glass, notched petals, white glossy highlights and subtle iridescence, a pale golden center with fine stamens. 3D render, studio lighting, glassmorphism style. Isolated, centered, on a plain solid white background. No text.
