Product Story Page

Live preview — fully interactive

The prompt

Build a single-page product story for HALO ONE wireless headphones: a gradient-mesh hero with the product name, $249 price and add-to-cart, four scroll-revealed selling points, three named reviews, and a frosted closing purchase band.

## Design system
- Tokens: background #08080

Full prompt (3336 chars) unlocks after purchase

The code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { background: #08080d; color: #f2f2f7; font-family: 'Inter', system-ui, sans-serif; }
  a { color: inherit; text-decoration: none; }
  .wrap { width: min(11

Complete self-contained HTML unlocks after purchase

About this section

A shippable product story for HALO ONE wireless headphones. A gradient-mesh hero holds the wordmark, price and add-to-cart over four drifting color blobs and a film-grain overlay. Four selling points rise on scroll, three named reviews follow, and a frosted purchase band closes the page. GSAP 3.12.5 plus ScrollTrigger.