The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Live Shopping Stream Page

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build [BRAND], an original live-shopping web experience hosted by the fictional [HOST_NAME] for [AUDIENCE]. The default event is '[SHOW_TITLE]'. Use one wide generated studio photograph and five generated product photographs to simulate a live broadcast through scripted local timing, subtle still-image motion, featured-product overlays, audience chat and gift reactions. Include a claimable countdown coupon, a product shelf drawer and a persistent cart with transparent discount math; no real streaming or commerce service exists.

- Audience: [AUDIENCE]. The page should also be useful to independent retailers, creators and developers evaluating a polished live-commerce interaction prototype that works entirely as static files.
- Goal: Let a visitor watch or manually navigate a five-part show, understand each featured product, join the local conversation, claim the demo offer, browse the shelf and build an accurately calculated sample order. Every visible button must change real client-side state, and the interface must never imply that a real broadcast, audience or transaction is taking place.
- Tone: Warm, composed, convivial and specific. Write like a thoughtful studio host sharing useful details, with gentle audience energy rather than frantic sales pressure, exaggerated claims or platform clichés.

## Stack
- Framework: Vite 6 + React 19 + TypeScript
- Styling: Tailwind CSS 4
- Libraries: motion (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL-1.1), @fontsource-variable/manrope (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Set Vite base to './' and build.sourcemap to false; emit only minified static files into dist/ with index.html as the sole HTML entry.
  - Configure Tailwind CSS 4 through @tailwindcss/vite; define the color tokens, font families, stage keyframes, gift lanes and reusable interface utilities in src/index.css.
  - Create src/content.ts as the single source for all variable values and derived copy, five products, five host chapters, seed chat messages, gift events, studio notes, image paths and UI labels; derive the storage namespace by lowercasing BRAND and removing spaces and punctuation.
  - Use one React context with reducers for show playback, active chapter, chat, gifts, claimed coupon, active drawer, expanded product, cart lines, toast and sample-order confirmation; do not add a state-management library.
  - Run the show from one deterministic 60-second local clock with five 12-second chapters. Use a single timer, never Math.random, and keep the active chapter, product overlay and progress segments synchronized. Pause the clock when the document is hidden.
  - Persist cart lines, claimed coupon, user-added chat messages and the coupon deadline in localStorage under one versioned key derived from BRAND; validate parsed data and stored quantities against current stock. Keep the deadline when the show loops or reloads.
  - Use Motion for drawers, dialogs, product overlays and toasts, and CSS keyframes for still-image drift and gift lanes. Use integer minor units for all prices and Intl.NumberFormat with [CURRENCY] for display.
  - Self-host Fraunces Variable and Manrope Variable through the listed Fontsource packages. Bundle Lucide icons locally and create only the original [BRAND] arch-and-lines mark as inline SVG.
  - Implement accessible drawer and dialog behavior with a visible close button, Escape and scrim dismissal, focus trapping, focus restoration and a polite status region for cart and coupon feedback.
  - Start with autonomous show motion paused when prefers-reduced-motion is requested; leave chapter buttons, shelf, cart and all other controls immediately usable.

## Variables
- [BRAND] — Invented live-shopping brand (default: "Moss & Meridian"). Use in the wordmark, document title, storage namespace and footer; rewrite all brand-derived copy when changed.
- [SHOW_TITLE] — Live event title (default: "The Soft Evening Edit"). A short collection or event name; adapt the five chapters and studio notes to this theme.
- [AUDIENCE] — Primary shopper audience (default: "design-conscious renters looking for practical comfort and small home rituals"). Rewrite host explanations, chat and product benefits for this audience without making real performance claims.
- [HOST_NAME] — Fictional host name (default: "Mara Ellison"). Use an invented name only; rewrite host captions and biography while keeping the supplied fictional host image.
- [ACCENT] — Primary action accent as a hex color (default: "#FF7A66"). Apply to primary actions, active chapters, live indicators and gift details while retaining accessible contrast.
- [CURRENCY] — Display currency (default: "USD"). Use Intl.NumberFormat for every price. Changing currency changes formatting only; rewrite price values explicitly rather than implying conversion.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/live-shopping-stream-page in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Canvas `#100F0E` — Warm near-black page background, stage scrims and deep surround.
- Surface `#1B1917` — Header, chat, product shelf, cart and secondary panels.
- Raised `#29241F` — Inputs, product cards, chips and elevated overlay surfaces.
- Parchment `#FFF8EE` — Primary text, prices, headings and high-contrast icons.
- Muted `#BCB0A3` — Timestamps, metadata, secondary copy and inactive controls.
- Coral `#FF7A66` — Default value of [ACCENT]; primary buttons, active states and simulated-live indicators.
- Butter `#F2CF7A` — Coupon panel and savings highlights, always with dark text.
- Sage `#A8C5A0` — Claimed, in-stock and successful local-state feedback.
- Hairline `#40372F` — One-pixel dividers, card borders and quiet progress tracks.

### Typography
- Host captions, event title and editorial notes: Fraunces Variable (OFL), weights 500/600/700
- Interface, chat, prices, product data and controls: Manrope Variable (OFL), weights 400/500/600/700/800

### Layout & motion
- Spacing: Use a 4px base unit. Desktop header is 64px with 28px horizontal padding; the main workspace uses a 20px gap and 24px outer gutters. Stage overlays use 20–24px padding, chat rows 12px vertical gaps, and drawer content 20px. Mobile header is 56px, outer gutters 12px, product and coupon controls at least 44px high, and bottom drawers include safe-area padding.
- Radius: Use 20px for the live stage and large drawers, 14px for product and coupon cards, 10px for inputs and small thumbnails, and fully rounded shapes only for compact badges, icon buttons and progress chips. Use 1px Hairline borders and short warm shadows rather than glass effects.
- Motion: Drift the active host still slowly from scale 1.025 translate3d(-0.5%,0,0) to scale 1.075 translate3d(0.75%,-0.75%,0) over 16s, alternating direction. Pause drift with show playback and when the document is hidden.
- Motion: At each 12-second chapter boundary, exit the old featured-product card 8px downward over 160ms and enter the new card 12px upward with 96% to 100% scale over 280ms. Host caption and chapter progress update on the same clock tick.
- Motion: Append one deterministic seed chat message every 2.4 seconds while chat playback is active. New rows use a 180ms opacity and 6px rise; cap the rendered list at 30 rows while retaining user messages.
- Motion: Emit a small gift reaction at seconds 5, 13, 21, 29, 37, 45 and 53 of each show cycle. Move at most three original Lucide-based gift symbols up separate fixed lanes over 1400ms with a slight horizontal drift, then remove them.
- Motion: Open desktop drawers from the right over 320ms and mobile bottom sheets upward over 300ms using cubic-bezier(0.22,1,0.36,1); fade scrims over 180ms and never animate the background page.
- Motion: Pulse the cart badge once at 180ms after an addition. Coupon claiming draws one checkmark, toasts remain for 1800ms, and price changes crossfade without moving surrounding layout.
- Motion: The coupon timer updates numerically once per second without flipping or pulsing. At zero it remains at 00:00 and reads Offer ended; it never resets.
- Motion: Under prefers-reduced-motion, remove host drift, gift travel, staggered entrances, smooth scrolling and count pulses. Start the show paused and use immediate chapter changes with at most a 100ms opacity transition for overlays.
- Imagery: Use exactly six local AI-generated photographs: one wide editorial host scene and five square product still lifes. All share warm tungsten practical light, walnut and cream surfaces, restrained coral accents, soft contact shadows, tactile realistic materials and fine 35mm grain. The host is a fictional adult shown in a spacious wide or medium-wide working scene, never a tight face crop. Apply directional Canvas scrims behind text rather than darkening the whole photograph. Products must remain generic and unbranded with no lettering, packaging marks, logos or watermarks. Do not replace these photographs with real people, recognizable commercial designs or unrelated imagery when variables change.

## Pages & Sections
### Live Shopping Show (`index.html`)
1. **Shared shell and simulation disclosure** — Create an original [BRAND] wordmark with a small open arch over two horizontal lines, not a platform-like play symbol. Header actions are Live show, Show notes and a ShoppingBag cart button with a unit-count badge. Show a compact red-coral LIVE DEMO label beside 'Interactive simulation · local sample data' so the event is not mistaken for a real stream. Live show returns to the stage; Show notes scrolls to the notes section; cart opens the cart drawer. On mobile retain the wordmark, LIVE DEMO label and cart, and place Live show and Show notes in a compact two-tab row below the header.
   Layout: Use a sticky 64px desktop and 56px mobile header with a solid Canvas background and Hairline bottom border. Desktop content has a 1440px maximum width. Keep the simulation disclosure visible without wrapping over the wordmark; at 390px shorten the secondary text to 'Local simulation'. The cart badge is Butter with Canvas text and never shifts the button width.
   Motion: Navigation active state changes immediately. The live dot may breathe gently only while the show plays; no continuous motion in the mobile tab row.
2. **Host stage and first-screen composition** — Use host-studio.webp as the large visual anchor. Overlay '[SHOW_TITLE]', 'with [HOST_NAME]' and a chapter-specific host caption. Default chapter captions are: 1 'Let’s begin with the light: a small pool of warmth changes the whole room.' 2 'This is the layer I keep nearby for slow endings and early starts.' 3 'A simple pour feels better when the glass sits comfortably in your hand.' 4 'Two quiet scents, one easy ritual. Burn them one at a time.' 5 'Everything from tonight folds into one soft, useful carry.' Include a Pause/Play show button, a mute-free 'No audio in this demo' note and a fixed '8,412 demo viewers' label. Do not add a real volume control, fullscreen-video control or fake streaming settings.
   Layout: At 1440×900 use a workspace grid with minmax(0,1fr) and a 344px chat column. The left stage has a 16:9 ratio and occupies roughly 880×495px, with the complete host, headline, current product card and playback controls visible. Top-left holds LIVE DEMO and viewer count; top-right holds playback. Bottom-left holds the event and chapter copy with right clearance for the product card. Below 768px use a 4:5 stage crop, place the product card beneath the photograph instead of over the host, keep captions above the bottom controls and let the page scroll naturally.
   Motion: Use the host drift and chapter timing defined in Design. Crossfade only the chapter caption; keep the photograph mounted to avoid flashes.
3. **Featured product and run of show** — Create five 12-second chapters in src/content.ts: 0–11 seconds Alder Table Lamp, 12–23 Cove Knit Throw, 24–35 Arc Glass Carafe, 36–47 Drift Candle Duo, 48–59 Fold Canvas Tote. Each featured card shows its local thumbnail, 'Featured in the studio', product name, current price, compare-at price and two working actions: Add to bag and View details. Default prices are $58/$72, $46/$56, $34/$42, $24/$30 and $28/$36 respectively. View details opens the shelf with that item expanded. Add to bag updates the shared cart immediately. Five labeled progress segments sit below the stage and allow direct chapter jumps; after second 60 the show returns to chapter 1 without resetting the coupon, cart or user chat. A Replay from start control resets only the show clock.
   Layout: Desktop featured card is 292px wide at the stage's lower right with an 84px square image and compact two-button row. Mobile card becomes a full-width Raised panel directly below the image. Progress segments use product initials only as small text labels, never as image substitutes; at 390px use numbers 01–05 with the active product name announced to screen readers.
   Motion: Follow the exact chapter boundary transitions. Clicking a segment sets both host caption and product in the same state update and restarts only that chapter's 12-second interval.
4. **Audience chat and original gift reactions** — Build a chat rail titled 'Studio chat' with All and Questions filters and a Pause chat/Resume chat button. Seed 14 fictional messages including 'The lamp glow looks much softer than ceiling light.' by Priya, 'Would the throw work on a reading chair?' by Ellis, 'The carafe shape is lovely.' by Noor and 'I just claimed the studio coupon.' by Jules. Mark question messages with a small HelpCircle icon, not a colored username badge. Append from a deterministic sequence every 2.4 seconds and show 'Demo audience · messages stay in this browser'. The composer has a 120-character input labeled Add a message, a Send button and a separate Send a star button. User messages appear as You and persist locally; empty input is rejected. Gift reactions use Heart, Star and Sparkles Lucide symbols with original names such as Warm star and Bright note, never platform gift artwork.
   Layout: Desktop chat fills the 344px right column beside the stage, with a 52px header, scrollable message list and sticky composer. Use 13px message text, 11px metadata and discreet circular monogram avatars only as chat accents; the photographic host anchors the page. Mobile shows the latest three messages in a collapsed panel with an Expand chat button, then a bottom sheet at 78dvh for the full rail. Composer controls remain above the safe area.
   Motion: Chat playback and show playback are independent. Pause chat stops only seed additions. Gift symbols float within a clipped stage overlay and never cover product prices or controls; reduced motion displays a static star count instead.
5. **Countdown coupon and claim feedback** — Place a Butter coupon strip directly below the stage and progress row: 'A little thank-you for watching', '$10 off a $60 bag', code STREAM10 and a 15:00 countdown initialized on the visitor's first load. Button copy is Claim coupon, then Coupon claimed with a Check icon. The offer applies once to the merchandise subtotal when it reaches $60 before discount; otherwise the cart shows the exact amount still needed. At zero, disable claiming and label Offer ended without clearing an already claimed valid coupon. Add a concise 'Sample offer · no payment is collected' note.
   Layout: Desktop uses one horizontal strip with message left, code and timer center, action right. Mobile stacks message, code/timer and a full-width action without covering the featured product. Use a code-drawn dashed ticket edge, not a barcode or third-party coupon motif.
   Motion: Timer numbers use tabular numerals. Claim feedback and cart eligibility update immediately; no urgency flashes or repeating countdown animation.
6. **Product shelf drawer** — Provide a prominent Browse all 5 products button beneath the coupon and from each View details action. The shelf lists Alder Table Lamp, Cove Knit Throw, Arc Glass Carafe, Drift Candle Duo and Fold Canvas Tote in show order with local photos, prices and stock labels. Default stock is 12, 8, 15, 20 and 9. Each row expands to concrete details: lamp 'Linen shade, walnut base, 16 in high, inline dimmer'; throw 'Recycled-cotton knit, 50 × 60 in, machine wash cold'; carafe 'Borosilicate glass, 34 oz, hand wash'; candles 'Two 6 oz soy-blend candles, cedar and fig, approximate 32-hour burn each'; tote '16 oz cotton canvas, 15 × 16 × 5 in, interior slip pocket'. Add to bag respects stock and never requires a variant selection. Include a small summary of the current bag and a Go to cart action.
   Layout: Desktop drawer is 480px wide from the right below the header; mobile is a 90dvh bottom sheet with rounded top corners and a visible handle, but closing never depends on dragging. Product rows use 112px square thumbnails and 16px gaps; expanded details remain in normal flow. Keep Add buttons visible without horizontal scrolling and trap focus while open.
   Motion: Drawer and scrim follow the shared transitions. Expanded details use a 180ms height and opacity reveal; reduced motion expands immediately.
7. **Cart drawer and sample order** — The shared cart button opens 'Your studio bag', initially empty with 'Start with something from tonight’s shelf' and a working Browse products action. Each line shows thumbnail, product name, unit price, quantity stepper capped by stock, line total and Remove with a five-second Undo toast. Summary rows show merchandise subtotal, STREAM10 discount when eligible, simulated shipping of $6 below $80 after discount or $0 at $80 and above, and final total. No tax or extra discount is added. Review sample order opens a dialog listing lines and totals with 'This is a simulated order. No payment or personal information is collected.' Confirm sample order only displays a local reference SAMPLE-1048 and keeps the cart intact. Never request an email, address, card or login.
   Layout: Reuse the desktop right-drawer and mobile bottom-sheet dimensions from the shelf. The order summary stays sticky at the bottom with safe-area padding, while lines scroll. The confirmation dialog is centered, max-width 520px, scrollable on small screens, and returns focus to the cart button when closed.
   Motion: Quantity and totals update before any visual effect. Removal collapses over 160ms and Undo restores the exact line and quantity. Confirmation uses a single 200ms settle.
8. **Studio notes and footer** — Below the live workspace add Show notes with three practical cards tied to the default edit: 'Start with one warm light' about placing a lamp below eye level; 'Keep one texture within reach' about layering a knit over a reading chair; 'Make the everyday pour deliberate' about storing a carafe and glass together. Add a short fictional host bio for [HOST_NAME]: 'A studio stylist who writes about small rooms, useful objects and slower routines.' These are informational cards, not links. Finish with [BRAND], 'A browser-only live-shopping concept. Host, audience, products, prices, stock and orders are fictional sample content.' and the optional [CREDIT] link. Do not add dates, social counts, legal claims or unrelated marketing sections.
   Layout: Use a max-width 1184px notes section with three equal desktop cards and a single mobile column, 64px desktop and 40px mobile top padding. Footer is a quiet two-row block with Hairline top border and enough bottom clearance on mobile. Keep note text left aligned and no larger than 16px.
   Motion: One subtle 8px reveal when notes first enter the viewport, removed under reduced motion. Footer has no animation.

## Assets
- image: Download https://media.vibefather.ai/assets/20e8710f-c1bc-4e19-aca3-c727a2d962f5/host-studio.webp to public/images/host-studio.webp. Alt: 'Fictional home-goods host arranging warm lighting and textiles in a walnut studio.' Use only as the full-bleed live-stage photograph and its responsive crops. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/20e8710f-c1bc-4e19-aca3-c727a2d962f5/alder-lamp.webp to public/images/alder-lamp.webp. Alt: 'Small walnut table lamp with a natural linen shade glowing on a warm set.' Use for the Alder Table Lamp featured card, shelf row and cart line. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/20e8710f-c1bc-4e19-aca3-c727a2d962f5/cove-throw.webp to public/images/cove-throw.webp. Alt: 'Folded cream and rust knitted throw on a walnut bench.' Use for the Cove Knit Throw featured card, shelf row and cart line. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/20e8710f-c1bc-4e19-aca3-c727a2d962f5/arc-carafe.webp to public/images/arc-carafe.webp. Alt: 'Clear curved glass carafe with a matching drinking glass on a cream plinth.' Use for the Arc Glass Carafe featured card, shelf row and cart line. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/20e8710f-c1bc-4e19-aca3-c727a2d962f5/drift-candles.webp to public/images/drift-candles.webp. Alt: 'Two plain amber glass candles with unlit cotton wicks on a walnut tray.' Use for the Drift Candle Duo featured card, shelf row and cart line. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/20e8710f-c1bc-4e19-aca3-c727a2d962f5/fold-tote.webp to public/images/fold-tote.webp. Alt: 'Soft natural canvas tote with rust stitching resting beside a cream wall.' Use for the Fold Canvas Tote featured card, shelf row and cart line. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- icon: Use lucide-react for ShoppingBag, Plus, Minus, X, Play, Pause, Send, Star, Heart, Sparkles, Check, HelpCircle, ChevronDown, ArrowRight, RotateCcw, PackageOpen and Undo2. Keep icons locally bundled and record Lucide's ISC license in ASSETS.md. Draw the original arch-and-lines brand symbol and ticket edges with inline SVG/CSS; do not imitate a streaming platform icon.
- font: Self-host Fraunces Variable through @fontsource-variable/fraunces and Manrope Variable through @fontsource-variable/manrope. Import only the used variable-font files, record both OFL-1.1 licenses in ASSETS.md and make no Google Fonts or other CDN requests.

## Don'ts
- Do not add a backend, server code, API routes, databases, authentication, remote forms, analytics or third-party API calls. All show, chat, audience, coupon, stock and order behavior is local sample state.
- Do not use any existing live-commerce platform name, logo, mascot, slogan, signature illustration, exact color palette, proprietary icon set, custom font, recognizable interface composition or source code.
- Do not use real hosts, celebrity likenesses or recognizable real people. The supplied host is a fictional generated person; do not replace this figure with a real person's photograph or identify the host as a real presenter.
- Do not copy existing usernames, chat transcripts, audience counts, product listings, prices, promotional copy, reviews, product photography or branded packaging; all supplied content and sample values must remain original.
- Do not use recorded streams, real video footage, platform-specific gift artwork, proprietary music, third-party brand marks, anime or game characters, or recognizable commercial product designs.
- Do not imply a real broadcast, real viewers, real purchases or actual scarcity. Retain the visible LIVE DEMO and simulation disclosures, fixed demo-viewer label and sample-offer language.
- Do not add autoplay audio, fake microphone or camera controls, fake streaming settings, real chat submission, payment fields, personal-information collection or a checkout that clears the cart.
- Do not reset the coupon deadline on reload or when the 60-second show loops, restart an ended offer, apply STREAM10 below its threshold, exceed stock or hide shipping and discount calculations.
- Do not hotlink assets or use Unsplash, Pexels, Pixabay, Google Images, placeholder-image services, CC BY-NC or CC BY-SA media. Download the six listed images to their exact local paths and list every third-party file in ASSETS.md.
- Do not load fonts, scripts, icons or styles from a CDN. Use only the fixed stack and permitted licenses, with both fonts self-hosted through Fontsource and no restricted component source.
- Do not emit source maps, copy src/ into dist/, exceed 20 MB or use absolute root asset URLs. The production build must work from a nested static path with relative URLs.
- Do not add more pages, bare-directory links, real routing services or server fallback requirements; keep the complete experience in index.html with local drawers and dialogs.
- Do not hard-code BRAND, SHOW_TITLE, AUDIENCE, HOST_NAME, ACCENT or CURRENCY outside src/content.ts, leave variable tokens visible, or rename a supplied photograph into an unrelated product when values change.
- Do not introduce emoji as icons, recognizable gift badges, generic glassmorphism, neon cyan-and-red treatments, excessive glow, frantic flashes or motion that obscures the host, chat or prices.
- Do not ship inert controls, nonfunctional pause or chapter buttons, broken focus states, tiny touch targets, horizontal overflow or console errors. Verify 1440×900 and 390×844, both drawers, chat, coupon eligibility, cart math and keyboard-only operation.
- Do not ignore prefers-reduced-motion. Autonomous host, chat and gift motion must stop or remain paused while manual chapter, product and cart interactions continue to work.
- Do not add SEO metadata, Open Graph tags, JSON-LD, sitemaps or keyword-stuffed content; a plain [BRAND] document title and original favicon are enough.
- Do not mention VibeFather anywhere in the demo except the optional renderer-provided [CREDIT] footer link.

---
— Prompt by VibeFather · https://vibefather.ai/t/live-shopping-stream-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.