Freehtmlcssjs

Exploded 3D product hero

Dark product page where a phone built from five CSS layers lifts apart into an isometric exploded view as you scroll, with callouts that follow each layer. No images, so every tool builds the same page.

Prompt

## Goal

Design a product landing page for Lumen, a premium smartphone maker. The hero shows the product, called "Lumen One", as a stack of five layers that lift apart in 3D as the visitor scrolls. Keep the tone confident and minimal.

Use the style, layout and motion rules below exactly. Replace the sample content with copy and part names that fit the goal, keeping the same five layers in the same order and similar text lengths.

## Style

Keep this exactly: it is what makes the design look the way it does.
- Page background #07080B, text #ECEEF5, muted text #8B90A3, surfaces #11131A, hairlines rgb(255 255 255 / 0.1). Accent gradient from warm amber #FFB86B to pink #FF5C8A (left to right). Font: system-ui.
- Gradient text: the accent gradient clipped to the text (`background-clip: text`, transparent color).
- Buttons are pills, 14px 26px padding, 15px semibold. Primary: accent gradient, dark text #1A0B12, soft pink glow (0 8px 28px rgb(255 92 138 / 0.32)). Secondary: transparent with a 1px border at 18% white. The small header button is the secondary style at 10px 20px padding, 14px text.
- Every focusable element shows a 2px amber (#FFB86B) focus outline with 3px offset.
- No images anywhere. Everything, including the device, is drawn with CSS and inline SVG. Do not generate, search for or link any image.

**The device.** Build one phone out of five stacked slabs. Size the device with one CSS variable, `--w = clamp(150px, min(20vw, 28svh), 280px)`, set it as the device's `font-size`, and give every device measurement below in `em` so the whole thing scales as one piece. The device is 1em wide and 2.05em tall. Each slab fills it (unless an inset is given), has `position: absolute`, and a 0.14em radius. Back to front, with index i from 0 to 4:
0. **Aluminium shell:** linear-gradient 160deg from #3A3E4F to #171923, 1px border at 14% white. A camera island at the top left (0.08em from the edges): 0.3em square, 0.08em radius, #0B0C11, 1px border at 12% white, with three 0.1em lenses (radial gradient from #3B4A7A to #0B0C11, 1px border at 25% white) in a triangle. The word "LUMEN" centered at 55% down, 0.055em bold, 0.5em letter spacing, 35% white.
1. **Battery:** inset 0.22em 0.07em 0.08em, 0.08em radius, #16231E, 1px border rgb(52 211 153 / 0.45), horizontal stripes (rgb(52 211 153 / 0.2) 0.02em lines every 0.06em). Centered monospace label "4,500 mAh", 0.06em bold, #6EE7B7.
2. **Logic board:** inset 0.05em, 0.1em radius, #0C2420, 1px border rgb(251 191 36 / 0.3), a fine grid of 1px rgb(251 191 36 / 0.16) lines every 0.09em in both directions. A 0.34em square chip centered at 50% across and 40% down (#11131A, 1px border rgb(255 184 107 / 0.75), 0.03em radius, a pink glow shadow 0 0 0.12em rgb(255 92 138 / 0.6), the text "L1" in amber) and three small 0.13em × 0.09em components.
3. **Display:** inset 0.02em, 0.12em radius, #05060A. A status bar at the top (two small dot groups, left and right), the time "9:41" centered at 0.17em from the top (0.24em, weight 200, -0.03em letter spacing), the date below it (0.05em, muted), a wide widget 0.07em from each side and 0.75em down (0.4em tall, 0.07em radius, the accent gradient at 135deg), two half-width widgets below it (0.28em tall, #1A1D29), and a dock at the bottom (0.2em tall, #11131A, four 0.1em circles at 20% white).
4. **Cover glass:** linear-gradient 135deg from 18% white through 3% white at 40% to 8% white, 1px border at 30% white, plus a black pill 0.22em × 0.05em at the top center (the camera cutout).

Behind the stage, a soft radial glow: ellipse 45% × 55% centered on the device, #1D1430 fading to transparent by 70%.

## Layout

1. **Header,** fixed, 72px tall, a fade from the page color to transparent: logo on the left (a 12px gradient dot with a pink glow and the brand name, 18px bold), links on the right ("Product", "Specs", "Pricing", 14px muted, 32px apart) and the small secondary "Pre-order" button.
2. **Scroll stage.** A section 320svh tall containing a sticky, `100svh` stage (`overflow: hidden`). Inside it:
   - Left column, 440px wide (max 40vw), vertically centered, 6vw from the left: a pill eyebrow (13px semibold muted text, 1px border at 14% white, a 6px gradient dot), an h1 (clamp(38px, 4.8vw, 68px), bold, line-height 1.02, -0.035em letter spacing) whose last words use the gradient text, an 18px muted paragraph, and a scroll hint (13px uppercase semibold muted text, 0.08em letter spacing, with a small down arrow).
   - The device centered at 58% across and 50% down, in a 3D scene (`perspective: 1700px`, perspective origin 58% 50%, `transform-style: preserve-3d` on every level between the scene and the slabs).
   - A scroll gauge at the bottom of the stage, centered under the device (58% across, 36px from the bottom): the word "Assembled", a 160px × 2px track (white at 12%) and the word "Exploded", in 11px semibold uppercase muted text with 0.16em letter spacing, 14px gaps. The track fills left to right with the accent gradient as `--p` goes from 0 to 1 (`transform: scaleX(var(--p))`, origin left).
   - Five callout labels to the right of the device, one per layer, listed top to bottom: Cover glass, OLED display, Logic board, Battery, Aluminium shell. Each is a 32px hairline (gradient from 50% to 10% white), then a 14px semibold name with a 12px muted detail line under it.
3. **Specs,** max-width 1200px, padding 120px 24px 112px: four cards in a row with 16px gaps (#11131A, 1px hairline border, 24px radius, 28px padding), each with a 56px bold number (tabular figures, -0.04em letter spacing) and a 15px muted caption.
4. **Closing call to action,** centered: a heading (clamp(34px, 4vw, 52px), bold, with the product name in the gradient), an 18px muted line, then the primary and secondary buttons 14px apart.
5. **Footer,** a hairline above, 13px muted text, copyright on the left and "Privacy · Terms" on the right.

Under 900px wide: the nav links hide (the button stays), the column sits at the top (96px down, full width) with the paragraph hidden and the h1 at 38px, the device is centered at 50% across and 62% down with `--w` at clamp(130px, 34vw, 200px), the callouts are hidden, the gauge is centered (50% across, 24px from the bottom), and the spec cards form two columns.

## Motion

Use CSS transitions, keyframes and a small vanilla script; no animation libraries and no WebGL. Use the easing cubic-bezier(0.22, 1, 0.36, 1) unless stated. **The explosion is plain CSS driven by one number:** the script only sets a unitless `--p` (0 to 1) on the stage, and every transform below is a `calc()` on `--p`, so the result is identical in every browser.
- **Scroll progress:** target progress = how far the sticky stage has scrolled through its section, (−section top) / (section height − viewport height), clamped to 0–1. Each animation frame, move the displayed `--p` toward the target by 12% of the remaining distance, so it eases instead of snapping, and stop updating once it is within 0.0005.
- **The device pose:** `transform: rotateX(calc(6deg + var(--p) * 50deg)) rotateZ(calc(var(--p) * -36deg))`. At 0 it is a phone seen almost straight on; at 1 it is tilted back into an isometric view.
- **The explosion:** each slab uses `transform: translateZ(calc((var(--i) - 2) * (0.008em + var(--p) * 0.42em)))`. At 0 the five slabs are stacked almost flat (the glass and display are what you see); at 1 they are 0.42em apart, the glass floating on top and the shell at the bottom. Rely on the browser's 3D sorting; never fake depth with z-index.
- **Intro:** on load each slab drops in on its own: it fades from 0 and slides down from 0.2em above (use the independent `translate` property so it does not fight the transform), 800ms, 90ms apart from the shell to the glass.
- **Idle float:** the whole device bobs 8px up and down, 5.2s ease-in-out, alternating, forever.
- **Pointer lean:** on devices with a fine pointer, the device also leans toward the cursor over the stage (up to 8deg of rotateY and 5deg of rotateX), easing over 600ms, and returns flat when the cursor leaves. Put this on its own wrapper, outside the float and the pose.
- **Scroll hint:** fades out as the scroll starts (opacity 1 − `--p` × 8); its arrow nudges down 5px and back every 1.8s.
- **Callouts:** every frame, place each label at the vertical center of its slab's on-screen bounding box (`getBoundingClientRect()`), and horizontally 32px to the right of the rightmost edge of any slab, so each hairline points at its own layer. Labels fade in (opacity, 500ms) one after another as the explosion opens: the glass label when `--p` passes 0.55, then each next one 0.07 later, and they fade out again when scrolling back up.
- **Buttons:** the primary lifts 2px with a stronger glow on hover; the secondary gets a faint white background.
- **Reduced motion:** with prefers-reduced-motion: reduce, **scrolling must still open and close the explosion**, because it is something the visitor does, not motion the page makes on its own. Keep the 320svh section, and set `--p` straight to the target progress on every scroll and resize event (no easing and no animation loop). Turn off only the self-running motion: the intro, the idle float, the pointer lean, the hint nudge and the label fade. Labels simply appear and disappear at their thresholds.

## Sample content

- Brand "Lumen". Product "Lumen One". Links "Product", "Specs", "Pricing". Header button "Pre-order".
- Eyebrow "Introducing Lumen One". Heading "Built layer by beautiful layer." with "beautiful layer." in the gradient. Paragraph "Five precision layers, one slim body. Scroll to take Lumen One apart and see what makes it so thin, so bright and so quick." Hint "Scroll to take it apart".
- Callouts: "Cover glass" / "3× tougher, scratch resistant"; "OLED display" / "2,400 nits peak brightness"; "Logic board" / "3nm chip, 40% faster"; "Battery" / "4,500 mAh, two full days"; "Aluminium shell" / "7.2 mm, recycled aluminium".
- Specs: "7.2mm" Thinnest Lumen yet; "2,400" Nits of peak brightness; "48MP" Triple-lens camera system; "2 days" Of battery on one charge.
- Closing: "Pre-order Lumen One" (the product name in the gradient), "Ships 21 November. Free engraving on every order.", buttons "Pre-order now" and "Compare models". Footer "© 2026 Lumen" and "Privacy · Terms".
- Mark the 3D scene `aria-hidden="true"` and give the stage an aria-label describing the five layers.

## Images

None. This design uses no photos, no generated images and no image links: the device is built from CSS and the page works the same in every tool. Do not add any `<img>` or background image.

## Output

A single self-contained HTML file with CSS in a `<style>` tag and JavaScript in one `<script>` tag, responsive down to 375px wide, using semantic HTML and visible keyboard focus states.

Loading live preview…

## Goal Design a product landing page for Lumen, a premium smartphone maker. The hero shows the product, called "Lumen One", as a stack of five layers that lift apart in 3D as the visitor scrolls. Keep the tone confident and minimal. Use the style, layout and motion rules below exactly. Replace the sample content with copy and part names that fit the goal, keeping the same five layers in the same order and similar text lengths. ## Style Keep this exactly: it is what makes the design look the way it does. - Page background #07080B, text #ECEEF5, muted text #8B90A3, surfaces #11131A, hairlines rgb(255 255 255 / 0.1). Accent gradient from warm amber #FFB86B to pink #FF5C8A (left to right). Font: system-ui. - Gradient text: the accent gradient clipped to the text (`background-clip: text`, transparent color). - Buttons are pills, 14px 26px padding, 15px semibold. Primary: accent gradient, dark text #1A0B12, soft pink glow (0 8px 28px rgb(255 92 138 / 0.32)). Secondary: transparent with a 1px border at 18% white. The small header button is the secondary style at 10px 20px padding, 14px text. - Every focusable element shows a 2px amber (#FFB86B) focus outline with 3px offset. - No images anywhere. Everything, including the device, is drawn with CSS and inline SVG. Do not generate, search for or link any image. **The device.** Build one phone out of five stacked slabs. Size the device with one CSS variable, `--w = clamp(150px, min(20vw, 28svh), 280px)`, set it as the device's `font-size`, and give every device measurement below in `em` so the whole thing scales as one piece. The device is 1em wide and 2.05em tall. Each slab fills it (unless an inset is given), has `position: absolute`, and a 0.14em radius. Back to front, with index i from 0 to 4: 0. **Aluminium shell:** linear-gradient 160deg from #3A3E4F to #171923, 1px border at 14% white. A camera island at the top left (0.08em from the edges): 0.3em square, 0.08em radius, #0B0C11, 1px border at 12% white, with three 0.1em lenses (radial gradient from #3B4A7A to #0B0C11, 1px border at 25% white) in a triangle. The word "LUMEN" centered at 55% down, 0.055em bold, 0.5em letter spacing, 35% white. 1. **Battery:** inset 0.22em 0.07em 0.08em, 0.08em radius, #16231E, 1px border rgb(52 211 153 / 0.45), horizontal stripes (rgb(52 211 153 / 0.2) 0.02em lines every 0.06em). Centered monospace label "4,500 mAh", 0.06em bold, #6EE7B7. 2. **Logic board:** inset 0.05em, 0.1em radius, #0C2420, 1px border rgb(251 191 36 / 0.3), a fine grid of 1px rgb(251 191 36 / 0.16) lines every 0.09em in both directions. A 0.34em square chip centered at 50% across and 40% down (#11131A, 1px border rgb(255 184 107 / 0.75), 0.03em radius, a pink glow shadow 0 0 0.12em rgb(255 92 138 / 0.6), the text "L1" in amber) and three small 0.13em × 0.09em components. 3. **Display:** inset 0.02em, 0.12em radius, #05060A. A status bar at the top (two small dot groups, left and right), the time "9:41" centered at 0.17em from the top (0.24em, weight 200, -0.03em letter spacing), the date below it (0.05em, muted), a wide widget 0.07em from each side and 0.75em down (0.4em tall, 0.07em radius, the accent gradient at 135deg), two half-width widgets below it (0.28em tall, #1A1D29), and a dock at the bottom (0.2em tall, #11131A, four 0.1em circles at 20% white). 4. **Cover glass:** linear-gradient 135deg from 18% white through 3% white at 40% to 8% white, 1px border at 30% white, plus a black pill 0.22em × 0.05em at the top center (the camera cutout). Behind the stage, a soft radial glow: ellipse 45% × 55% centered on the device, #1D1430 fading to transparent by 70%. ## Layout 1. **Header,** fixed, 72px tall, a fade from the page color to transparent: logo on the left (a 12px gradient dot with a pink glow and the brand name, 18px bold), links on the right ("Product", "Specs", "Pricing", 14px muted, 32px apart) and the small secondary "Pre-order" button. 2. **Scroll stage.** A section 320svh tall containing a sticky, `100svh` stage (`overflow: hidden`). Inside it: - Left column, 440px wide (max 40vw), vertically centered, 6vw from the left: a pill eyebrow (13px semibold muted text, 1px border at 14% white, a 6px gradient dot), an h1 (clamp(38px, 4.8vw, 68px), bold, line-height 1.02, -0.035em letter spacing) whose last words use the gradient text, an 18px muted paragraph, and a scroll hint (13px uppercase semibold muted text, 0.08em letter spacing, with a small down arrow). - The device centered at 58% across and 50% down, in a 3D scene (`perspective: 1700px`, perspective origin 58% 50%, `transform-style: preserve-3d` on every level between the scene and the slabs). - A scroll gauge at the bottom of the stage, centered under the device (58% across, 36px from the bottom): the word "Assembled", a 160px × 2px track (white at 12%) and the word "Exploded", in 11px semibold uppercase muted text with 0.16em letter spacing, 14px gaps. The track fills left to right with the accent gradient as `--p` goes from 0 to 1 (`transform: scaleX(var(--p))`, origin left). - Five callout labels to the right of the device, one per layer, listed top to bottom: Cover glass, OLED display, Logic board, Battery, Aluminium shell. Each is a 32px hairline (gradient from 50% to 10% white), then a 14px semibold name with a 12px muted detail line under it. 3. **Specs,** max-width 1200px, padding 120px 24px 112px: four cards in a row with 16px gaps (#11131A, 1px hairline border, 24px radius, 28px padding), each with a 56px bold number (tabular figures, -0.04em letter spacing) and a 15px muted caption. 4. **Closing call to action,** centered: a heading (clamp(34px, 4vw, 52px), bold, with the product name in the gradient), an 18px muted line, then the primary and secondary buttons 14px apart. 5. **Footer,** a hairline above, 13px muted text, copyright on the left and "Privacy · Terms" on the right. Under 900px wide: the nav links hide (the button stays), the column sits at the top (96px down, full width) with the paragraph hidden and the h1 at 38px, the device is centered at 50% across and 62% down with `--w` at clamp(130px, 34vw, 200px), the callouts are hidden, the gauge is centered (50% across, 24px from the bottom), and the spec cards form two columns. ## Motion Use CSS transitions, keyframes and a small vanilla script; no animation libraries and no WebGL. Use the easing cubic-bezier(0.22, 1, 0.36, 1) unless stated. **The explosion is plain CSS driven by one number:** the script only sets a unitless `--p` (0 to 1) on the stage, and every transform below is a `calc()` on `--p`, so the result is identical in every browser. - **Scroll progress:** target progress = how far the sticky stage has scrolled through its section, (−section top) / (section height − viewport height), clamped to 0–1. Each animation frame, move the displayed `--p` toward the target by 12% of the remaining distance, so it eases instead of snapping, and stop updating once it is within 0.0005. - **The device pose:** `transform: rotateX(calc(6deg + var(--p) * 50deg)) rotateZ(calc(var(--p) * -36deg))`. At 0 it is a phone seen almost straight on; at 1 it is tilted back into an isometric view. - **The explosion:** each slab uses `transform: translateZ(calc((var(--i) - 2) * (0.008em + var(--p) * 0.42em)))`. At 0 the five slabs are stacked almost flat (the glass and display are what you see); at 1 they are 0.42em apart, the glass floating on top and the shell at the bottom. Rely on the browser's 3D sorting; never fake depth with z-index. - **Intro:** on load each slab drops in on its own: it fades from 0 and slides down from 0.2em above (use the independent `translate` property so it does not fight the transform), 800ms, 90ms apart from the shell to the glass. - **Idle float:** the whole device bobs 8px up and down, 5.2s ease-in-out, alternating, forever. - **Pointer lean:** on devices with a fine pointer, the device also leans toward the cursor over the stage (up to 8deg of rotateY and 5deg of rotateX), easing over 600ms, and returns flat when the cursor leaves. Put this on its own wrapper, outside the float and the pose. - **Scroll hint:** fades out as the scroll starts (opacity 1 − `--p` × 8); its arrow nudges down 5px and back every 1.8s. - **Callouts:** every frame, place each label at the vertical center of its slab's on-screen bounding box (`getBoundingClientRect()`), and horizontally 32px to the right of the rightmost edge of any slab, so each hairline points at its own layer. Labels fade in (opacity, 500ms) one after another as the explosion opens: the glass label when `--p` passes 0.55, then each next one 0.07 later, and they fade out again when scrolling back up. - **Buttons:** the primary lifts 2px with a stronger glow on hover; the secondary gets a faint white background. - **Reduced motion:** with prefers-reduced-motion: reduce, **scrolling must still open and close the explosion**, because it is something the visitor does, not motion the page makes on its own. Keep the 320svh section, and set `--p` straight to the target progress on every scroll and resize event (no easing and no animation loop). Turn off only the self-running motion: the intro, the idle float, the pointer lean, the hint nudge and the label fade. Labels simply appear and disappear at their thresholds. ## Sample content - Brand "Lumen". Product "Lumen One". Links "Product", "Specs", "Pricing". Header button "Pre-order". - Eyebrow "Introducing Lumen One". Heading "Built layer by beautiful layer." with "beautiful layer." in the gradient. Paragraph "Five precision layers, one slim body. Scroll to take Lumen One apart and see what makes it so thin, so bright and so quick." Hint "Scroll to take it apart". - Callouts: "Cover glass" / "3× tougher, scratch resistant"; "OLED display" / "2,400 nits peak brightness"; "Logic board" / "3nm chip, 40% faster"; "Battery" / "4,500 mAh, two full days"; "Aluminium shell" / "7.2 mm, recycled aluminium". - Specs: "7.2mm" Thinnest Lumen yet; "2,400" Nits of peak brightness; "48MP" Triple-lens camera system; "2 days" Of battery on one charge. - Closing: "Pre-order Lumen One" (the product name in the gradient), "Ships 21 November. Free engraving on every order.", buttons "Pre-order now" and "Compare models". Footer "© 2026 Lumen" and "Privacy · Terms". - Mark the 3D scene `aria-hidden="true"` and give the stage an aria-label describing the five layers. ## Images None. This design uses no photos, no generated images and no image links: the device is built from CSS and the page works the same in every tool. Do not add any `<img>` or background image. ## Output A single self-contained HTML file with CSS in a `<style>` tag and JavaScript in one `<script>` tag, responsive down to 375px wide, using semantic HTML and visible keyboard focus states.