Frosted glass wellness app screen

A full-screen frosted-glass app window over drifting teal and amber glows: a surreal banner with chips and time pills, a progress card, three session cards and a working pager.

Prompt

## Goal

Design a course overview screen for Lull, a breathwork and sleep app. Keep the tone calm, soft and dreamy.

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 frosted-glass app window floating over a softly glowing teal background, with dreamy surreal 3D images.
- Font, from Google Fonts: **Manrope** (400, 500, 600, 700) for everything. Text is white: body rgb(255 255 255 / 0.82), faint rgb(255 255 255 / 0.6). Accent mint #9BF0D8 (focus outlines only).
- Page backdrop, fixed behind everything: a diagonal gradient 135deg from #0C3640 through #17575F (45%) to #2A7A78, with four large blurred glows (CSS blur 70px, border-radius 50%) that drift slowly: amber #F2A44E at the left edge about 38% down (34vw wide), coral #EE7B5E at the bottom right (38vw wide), mint #7ED9C3 at the top center (40vw wide, 55% opacity) and light amber #F6C77C right of center (22vw wide, 50% opacity).
- **The glass window** fills the whole page: margin clamp(10px, 1.4vw, 22px), min-height 100vh minus the margins, radius clamp(24px, 2.6vw, 40px), overflow hidden, background linear-gradient(160deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.07)), a 1px border rgb(255 255 255 / 0.32), backdrop-filter blur(28px) saturate(1.3), shadow 0 30px 80px -30px rgb(4 26 32 / 0.6), plus an inset white top highlight (inset 0 1px 0 rgb(255 255 255 / 0.5)).
- **Glass pieces** (chips, pills, buttons, cards): translucent white fills between 10% and 40% opacity, 1px borders at 22% to 40% white, backdrop blur 10px, and a faint inset white top highlight. Cards use the same gradient as the window with a 1px border at 22% white and 26px radius.
- Headings Manrope 700, letter-spacing -0.02em. Every focusable element shows a 2px mint focus outline with 3px offset.
- Nothing has a max-width: the window and its content stretch with the screen.

## Layout

Inside the glass window, from top to bottom:
1. **Banner**: full width, height clamp(210px, 26vw, 420px), a wide image cropped to cover (see Images), with a slight dark fade over its bottom 40%. On it: a 46px round glass back button at the top left and a 46px round glass heart (save) button at the top right, each 18px to 34px from the edges. At the bottom left, two glass chips (34px tall, 13px weight 600, 18px side padding, 10px gap): "Deep Rest & Recovery" and "Mindful Breathing". At the bottom right, three glass pills (40px tall, 14px weight 600, 18px to 30px side padding, 10px gap): "3 min", "5 min", "7 min". "3 min" is selected when the page loads. The selected pill is brighter (40% white fill, white text, a soft shadow and inset top highlight); the others are dimmer (14% white).
2. **Content row**, padding clamp(28px, 3.4vw, 56px) clamp(22px, 3.4vw, 56px) 0, two columns (the left takes the rest, the right is 24% wide, at least 220px) with a clamp(24px, 6vw, 110px) gap. Left: the title (clamp(26px, 2.6vw, 42px), weight 700) "Plan “Finding Your Slow Breath”", and below it, 18px down, a paragraph (clamp(13px, 1.05vw, 17px), line-height 1.65, max 880px). Right: a glass outline card (22px radius, 5% white fill, 1px border at 32% white, 20px 24px padding) holding the line "Keep the slow rhythm" (clamp(15px, 1.25vw, 19px), weight 700) and, 16px below, a progress bar of 7 equal segments (5px tall, 6px gaps, fully rounded) where the first 2 are solid white and the rest white at 28%.
3. **Session cards and pager**: a grid of three equal columns plus a 56px column on the right, clamp(16px, 2vw, 32px) gap, padding clamp(26px, 2.8vw, 46px) clamp(22px, 3.4vw, 56px). Each card has clamp(10px, 1vw, 16px) padding and holds: an image (16 : 10, 18px radius, a 1px border at 30% white, cropped to cover); under it a glass tag chip (30px tall, 12.5px weight 600) such as "Breathwork" or "Sleep"; and a title (clamp(15px, 1.35vw, 21px), weight 700, one line with an ellipsis if too long). The first card is the active one: a brighter gradient, a 1px border at 65% white and a deeper shadow. The pager column on the right is a vertical stack of 44px round glass buttons, 14px apart: an up chevron, then "1", "2", "3", then a down chevron. The current number has a solid white outline and a brighter fill.

Under 960px wide: the content row becomes one column (the progress card sits under the paragraph), the cards go two per row, and the pager becomes a horizontal row centered under them with its chevrons pointing left and right. Under 600px: the banner is 300px tall, the chips wrap along its bottom, the time pills move up above them, and the cards are one per row.

## Motion

Easing for everything: cubic-bezier(0.22, 1, 0.36, 1).
- **Backdrop glows** drift slowly: each glow translates about 4vw right and 3vw up and scales to 1.12, back and forth, on its own 20s to 30s loop.
- **Banner image** settles in on load: from scale 1.12 and transparent to scale 1.04 over 2200ms.
- **Reveal**: the title block, progress card, cards and pager fade in and rise 22px over 800ms when 12% visible, staggered 100ms apart. Each animates once.
- **Hover**: a card lifts 4px and its image zooms to 1.06 over 800ms; the round buttons grow to 1.06 and brighten.
- **Working controls**: the back button is a link. The heart toggles (filled white when saved). Only one time pill is selected at a time. Clicking a progress segment fills the bar up to that segment. The pager numbers, up and down chevrons choose which card is active (wrapping around).
- **Reduced motion**: with prefers-reduced-motion: reduce, turn all animation and transitions off and show everything at once.

## Sample content

- Brand "Lull" (it does not need to appear on the page, but keep it as the page title).
- Title "Plan “Finding Your Slow Breath”". Paragraph "Step into a gentle journey that leads you to the quiet centre of your day, guided by short sessions designed to slow your breath, soften your focus and help you rest deeply. Here, you’ll explore calming techniques and simple practices, all aimed at building a steady connection to stillness."
- Progress card "Keep the slow rhythm". Chips "Deep Rest & Recovery", "Mindful Breathing". Pills "3 min", "5 min", "7 min".
- Cards: "Breathwork" · "Evening Wind-Down Workshop"; "Sleep" · "Soft Focus: Settling In"; "Breathwork" · "Mindful Waters: Drifting Deeper".

## 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. Under every image, draw a fallback so the page looks finished before the files exist: for the banner, a soft pale-mint to peach vertical gradient (#9ADBCB → #C9E8D8 → #F4CF9C) with a large translucent white circle in the middle; for the cards, a soft diagonal gradient (#B7E6D6 → #F2D5A8).

Slots:
- Banner, `images/banner.jpg`: fills the top banner (cropped to cover, so keep its subject centered).
- Card 1, `images/card-spheres.jpg`; Card 2, `images/card-moss.jpg`; Card 3, `images/card-rings.jpg`: each fills its card's image (16 : 10, cropped to cover).

## 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 Google Font and the images above; no libraries or frameworks. Designed for a 1440 × 900 screen, filling the full width and height of any screen, and responsive down to 375px wide, with semantic HTML (a main landmark, a heading, real buttons and a nav for the pager, labelled controls).

## Image prompts

Use these with any image generator. Keep each image free of text and logos.
- **banner.jpg** (16:9): Surreal dreamy 3D digital art, a wide panorama. A giant clear glass sphere floats above a perfectly still mirror lake in the center of the frame, its lower half reflecting a tiny distant island with a small tower. Stylized soft trees with warm amber-gold feathery foliage and slender dark trunks stand on the left and right, with misty teal mountains behind, smooth pale teal rocks in the water, and a soft gradient sky from mint green to peach and apricot. Calm, glossy, premium, soft light. No text, no logos, no people.
- **card-spheres.jpg** (4:3): Surreal dreamy 3D render. Glossy translucent glass spheres of different sizes resting in shallow clear turquoise water, among soft pastel amber and coral fluffy shrubs, under a pale mint sky, with soft reflections. Calm, premium. No text, no logos, no people.
- **card-moss.jpg** (4:3): Surreal dreamy 3D render. A soft fuzzy moss-green velvet boulder resting on pale sand dunes, with a gentle mint-teal haze and a peach sky, tiny pebbles around it, calm and tactile. No text, no logos, no people.
- **card-rings.jpg** (4:3): Surreal dreamy 3D render. Two tall glass rings standing in still water, reflecting a calm sunrise over distant teal mountains, with a small glass sphere floating between them under an amber and mint sky. Calm, premium. No text, no logos, no people.

Loading live preview…

## Goal Design a course overview screen for Lull, a breathwork and sleep app. Keep the tone calm, soft and dreamy. 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 frosted-glass app window floating over a softly glowing teal background, with dreamy surreal 3D images. - Font, from Google Fonts: **Manrope** (400, 500, 600, 700) for everything. Text is white: body rgb(255 255 255 / 0.82), faint rgb(255 255 255 / 0.6). Accent mint #9BF0D8 (focus outlines only). - Page backdrop, fixed behind everything: a diagonal gradient 135deg from #0C3640 through #17575F (45%) to #2A7A78, with four large blurred glows (CSS blur 70px, border-radius 50%) that drift slowly: amber #F2A44E at the left edge about 38% down (34vw wide), coral #EE7B5E at the bottom right (38vw wide), mint #7ED9C3 at the top center (40vw wide, 55% opacity) and light amber #F6C77C right of center (22vw wide, 50% opacity). - **The glass window** fills the whole page: margin clamp(10px, 1.4vw, 22px), min-height 100vh minus the margins, radius clamp(24px, 2.6vw, 40px), overflow hidden, background linear-gradient(160deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.07)), a 1px border rgb(255 255 255 / 0.32), backdrop-filter blur(28px) saturate(1.3), shadow 0 30px 80px -30px rgb(4 26 32 / 0.6), plus an inset white top highlight (inset 0 1px 0 rgb(255 255 255 / 0.5)). - **Glass pieces** (chips, pills, buttons, cards): translucent white fills between 10% and 40% opacity, 1px borders at 22% to 40% white, backdrop blur 10px, and a faint inset white top highlight. Cards use the same gradient as the window with a 1px border at 22% white and 26px radius. - Headings Manrope 700, letter-spacing -0.02em. Every focusable element shows a 2px mint focus outline with 3px offset. - Nothing has a max-width: the window and its content stretch with the screen. ## Layout Inside the glass window, from top to bottom: 1. **Banner**: full width, height clamp(210px, 26vw, 420px), a wide image cropped to cover (see Images), with a slight dark fade over its bottom 40%. On it: a 46px round glass back button at the top left and a 46px round glass heart (save) button at the top right, each 18px to 34px from the edges. At the bottom left, two glass chips (34px tall, 13px weight 600, 18px side padding, 10px gap): "Deep Rest & Recovery" and "Mindful Breathing". At the bottom right, three glass pills (40px tall, 14px weight 600, 18px to 30px side padding, 10px gap): "3 min", "5 min", "7 min". "3 min" is selected when the page loads. The selected pill is brighter (40% white fill, white text, a soft shadow and inset top highlight); the others are dimmer (14% white). 2. **Content row**, padding clamp(28px, 3.4vw, 56px) clamp(22px, 3.4vw, 56px) 0, two columns (the left takes the rest, the right is 24% wide, at least 220px) with a clamp(24px, 6vw, 110px) gap. Left: the title (clamp(26px, 2.6vw, 42px), weight 700) "Plan “Finding Your Slow Breath”", and below it, 18px down, a paragraph (clamp(13px, 1.05vw, 17px), line-height 1.65, max 880px). Right: a glass outline card (22px radius, 5% white fill, 1px border at 32% white, 20px 24px padding) holding the line "Keep the slow rhythm" (clamp(15px, 1.25vw, 19px), weight 700) and, 16px below, a progress bar of 7 equal segments (5px tall, 6px gaps, fully rounded) where the first 2 are solid white and the rest white at 28%. 3. **Session cards and pager**: a grid of three equal columns plus a 56px column on the right, clamp(16px, 2vw, 32px) gap, padding clamp(26px, 2.8vw, 46px) clamp(22px, 3.4vw, 56px). Each card has clamp(10px, 1vw, 16px) padding and holds: an image (16 : 10, 18px radius, a 1px border at 30% white, cropped to cover); under it a glass tag chip (30px tall, 12.5px weight 600) such as "Breathwork" or "Sleep"; and a title (clamp(15px, 1.35vw, 21px), weight 700, one line with an ellipsis if too long). The first card is the active one: a brighter gradient, a 1px border at 65% white and a deeper shadow. The pager column on the right is a vertical stack of 44px round glass buttons, 14px apart: an up chevron, then "1", "2", "3", then a down chevron. The current number has a solid white outline and a brighter fill. Under 960px wide: the content row becomes one column (the progress card sits under the paragraph), the cards go two per row, and the pager becomes a horizontal row centered under them with its chevrons pointing left and right. Under 600px: the banner is 300px tall, the chips wrap along its bottom, the time pills move up above them, and the cards are one per row. ## Motion Easing for everything: cubic-bezier(0.22, 1, 0.36, 1). - **Backdrop glows** drift slowly: each glow translates about 4vw right and 3vw up and scales to 1.12, back and forth, on its own 20s to 30s loop. - **Banner image** settles in on load: from scale 1.12 and transparent to scale 1.04 over 2200ms. - **Reveal**: the title block, progress card, cards and pager fade in and rise 22px over 800ms when 12% visible, staggered 100ms apart. Each animates once. - **Hover**: a card lifts 4px and its image zooms to 1.06 over 800ms; the round buttons grow to 1.06 and brighten. - **Working controls**: the back button is a link. The heart toggles (filled white when saved). Only one time pill is selected at a time. Clicking a progress segment fills the bar up to that segment. The pager numbers, up and down chevrons choose which card is active (wrapping around). - **Reduced motion**: with prefers-reduced-motion: reduce, turn all animation and transitions off and show everything at once. ## Sample content - Brand "Lull" (it does not need to appear on the page, but keep it as the page title). - Title "Plan “Finding Your Slow Breath”". Paragraph "Step into a gentle journey that leads you to the quiet centre of your day, guided by short sessions designed to slow your breath, soften your focus and help you rest deeply. Here, you’ll explore calming techniques and simple practices, all aimed at building a steady connection to stillness." - Progress card "Keep the slow rhythm". Chips "Deep Rest & Recovery", "Mindful Breathing". Pills "3 min", "5 min", "7 min". - Cards: "Breathwork" · "Evening Wind-Down Workshop"; "Sleep" · "Soft Focus: Settling In"; "Breathwork" · "Mindful Waters: Drifting Deeper". ## 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. Under every image, draw a fallback so the page looks finished before the files exist: for the banner, a soft pale-mint to peach vertical gradient (#9ADBCB → #C9E8D8 → #F4CF9C) with a large translucent white circle in the middle; for the cards, a soft diagonal gradient (#B7E6D6 → #F2D5A8). Slots: - Banner, `images/banner.jpg`: fills the top banner (cropped to cover, so keep its subject centered). - Card 1, `images/card-spheres.jpg`; Card 2, `images/card-moss.jpg`; Card 3, `images/card-rings.jpg`: each fills its card's image (16 : 10, cropped to cover). ## 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 Google Font and the images above; no libraries or frameworks. Designed for a 1440 × 900 screen, filling the full width and height of any screen, and responsive down to 375px wide, with semantic HTML (a main landmark, a heading, real buttons and a nav for the pager, labelled controls). ## Image prompts Use these with any image generator. Keep each image free of text and logos. - **banner.jpg** (16:9): Surreal dreamy 3D digital art, a wide panorama. A giant clear glass sphere floats above a perfectly still mirror lake in the center of the frame, its lower half reflecting a tiny distant island with a small tower. Stylized soft trees with warm amber-gold feathery foliage and slender dark trunks stand on the left and right, with misty teal mountains behind, smooth pale teal rocks in the water, and a soft gradient sky from mint green to peach and apricot. Calm, glossy, premium, soft light. No text, no logos, no people. - **card-spheres.jpg** (4:3): Surreal dreamy 3D render. Glossy translucent glass spheres of different sizes resting in shallow clear turquoise water, among soft pastel amber and coral fluffy shrubs, under a pale mint sky, with soft reflections. Calm, premium. No text, no logos, no people. - **card-moss.jpg** (4:3): Surreal dreamy 3D render. A soft fuzzy moss-green velvet boulder resting on pale sand dunes, with a gentle mint-teal haze and a peach sky, tiny pebbles around it, calm and tactile. No text, no logos, no people. - **card-rings.jpg** (4:3): Surreal dreamy 3D render. Two tall glass rings standing in still water, reflecting a calm sunrise over distant teal mountains, with a small glass sphere floating between them under an amber and mint sky. Calm, premium. No text, no logos, no people.