# Interactive Product Demo

> The hero is the product: a full, live-looking app window with real data, clickable tabs, hotspots and a guided cursor, framed on a calm technical page.

- Nickname: Try-it-live hero
- Also called: Product-led landing, Live demo landing, Clickable hero
- Category: Landing Page Patterns
- Moods: Techy, Trustworthy, Calm
- Industries: SaaS, AI Products, Fintech & Banking, Startup & Tech, Corporate & B2B
- Style page: https://uilingo.dev/styles/interactive-product-demo/

Interactive Product Demo pages skip the illustration and drop a working-looking copy of the app straight under the headline: a dark browser window with traffic-light dots, a URL pill, a sidebar, KPIs, a chart and a table. Tabs under the window switch views, pulsing hotspots explain features and an animated cursor hints that it is clickable. Every later section repeats the idea with framed mini screens. The marketing skin around it stays quiet — cool grey dot grid, crisp 1px borders, one electric blue and a live green.

## Best for
- Product-led SaaS with a self-serve trial
- Dashboards, editors and dev tools whose UI is the selling point
- Complex products that are easier to show than to describe
- Launch pages for a redesigned app

## Avoid for
- Services or physical goods with no software UI
- Products whose UI is still unfinished or unimpressive
- Very low-bandwidth audiences — the demo must stay light

## Do
- Use real-looking data (names, numbers, dates) in the demo, never lorem ipsum
- Keep the demo window at 100% of the container width with a 1px frame and a deep soft shadow
- Give at least one obvious affordance: tabs, hotspots or a cursor
- Respect prefers-reduced-motion for the cursor and pulses

## Don't
- Don’t use a static flat screenshot with no hint of interaction
- Don’t blur or skeleton the product — it has to be readable
- Don’t add decorative illustrations that compete with the app window

## Audit
Passed after 2 rounds · builder unknown · auditor unknown

## Prompt
Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page.

```markdown
# Build a landing web page in the "Interactive Product Demo" UI style

Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light

## The style in one line
The hero is the product: a full, live-looking app window with real data, clickable tabs, hotspots and a guided cursor, framed on a calm technical page.
Design keywords: app window in the hero, browser chrome frame, clickable view tabs, pulsing hotspots, animated demo cursor, live data badge, dot-grid canvas, mini screens per feature.

## Visual language
A calm, technical marketing page whose real star is the product itself: directly under a centred headline sits a full-width, dark browser window containing a working-looking copy of the app — sidebar, KPIs, chart, activity, table — with clickable view tabs, pulsing green hotspots and an animated cursor. The page around it is quiet: cool grey canvas with a faint dot grid, white cards with crisp 1px borders, one electric blue for actions and a live green for ‘this is running’. Every later section repeats the product in smaller framed screens instead of illustrations.

## Signature details (must be visible)
- Hero app window: full container width, #0B0F17 body, 16px radius, 1px #1E2738 border, 6px rgba(255,255,255,.6) outer ring and shadow 0 40px 80px -24px rgba(13,19,33,.38)
- Window chrome bar, always dark: 42px tall, #10151F with a 1px #1E2738 bottom border; traffic lights #FF5F57 / #FEBC2E / #28C840 (11px, 7px gap); centred URL pill on #1A2233 with #97A1B5 Geist Mono 0.75rem text (app.<brand>.com/overview); '● LIVE' label in #3CCB7F mono 0.7rem with a blinking dot
- Inside the window: 200px sidebar + main area with 3 KPI cards, a line chart, an activity list, and a segmented control whose tabs actually swap panels (overview / table / bars)
- Pulsing hotspots: 18px #12B76A dots with a 2px ring that scales to 2.4× and fades every 1.8s, each with a white tooltip naming a feature. Tooltips stay visible on desktop and sit at panel edges so they never cover a KPI value; hotspot positions are % of the main area
- Animated white cursor arrow on a 9s loop: tab 2 (0–30%) → hotspot 1 (45%) → hotspot 2 (70%) → back to tab 2 (100%); disabled under prefers-reduced-motion. Under 960px hide the cursor and keep one hotspot
- Scoped dark window token set (redefine the CSS variables on the window only, so the page stays light): bg #0B0F17, surface #121826, surface-2 #1A2233, text #E6EAF2, muted #97A1B5, border #263045, primary #4D8DFF (text on it #071021), success #3CCB7F, warning #F5B14C, danger #FF6B5E; window sidebar #0E131D
- At most 3 feature rows, each with a framed mini window (same dark chrome) that carries a working tab strip or a hotspot; static mini screens are the Feature-Rich Showcase tell. Step labels in Geist Mono '01 02 03'
- Page canvas #F6F7FB with a 20px dot grid at 10% ink and a soft blue glow behind the hero

## Design tokens — use these exact values
Colours (light mode):
  - background #F6F7FB
  - surface #FFFFFF
  - surface-2 #EEF1F7
  - text #0D1321
  - text-muted #545E73
  - primary #0A5CDB (text on it #FFFFFF)
  - secondary #0D1321 (text on it #FFFFFF)
  - accent #12B76A
  - border #DCE1EA
  - success #067647 · warning #B54708 · danger #D92D20
  - chart series #0A5CDB, #12B76A, #7A5AF8, #F79009, #98A2B3
Radius: sm 6px, md 8px, lg 12px, xl 16px, pill 999px
Border width: 1px
Shadows: sm `0 1px 2px rgba(13,19,33,0.06)`, md `0 6px 18px -6px rgba(13,19,33,0.14)`, lg `0 40px 80px -24px rgba(13,19,33,0.38), 0 0 0 1px rgba(13,19,33,0.06)` (where shadows reference var(--c-border) use the border colour)
Spacing: 8px base unit × 0.95 density
Motion: 180ms cubic-bezier(.2,.8,.2,1)

## Typography (Latin + Thai)
- Headings: Geist 500/600/700 with Thai fallback Noto Sans Thai 500/600/700
- Body: Geist 400/500/600 with Thai fallback Noto Sans Thai 400/500/600
- Mono: Geist Mono
- Google Fonts URL: https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap
- CSS stacks: heading `"Geist", "Noto Sans Thai", system-ui, sans-serif`; body `"Geist", "Noto Sans Thai", system-ui, sans-serif`; mono `"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Noto Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face.
- Display size clamp(2.5rem, 5.2vw, 4.25rem), heading weight 600, heading tracking -0.035em (Latin only), sentence-case labels.
- Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side.
- Why this pairing: Noto Sans Thai is loopless, even-stroked and engineered like Geist, so Thai labels inside the demo UI look like the same product font.

## Components
- Primary button: #0A5CDB, 8px radius, 500 weight, inner top highlight + 1px #084CB8 ring; hover darkens, no lift
- Secondary button: white, 1px #DCE1EA border, small shadow, leading mouse-pointer-click icon on ‘try the demo’ actions
- Eyebrow: white pill, mono 0.78rem text, with a blinking 8px green live dot
- Cards: white, 12px radius, 1px #DCE1EA border, 0 1px 2px shadow; hover only strengthens the border/shadow
- Segmented view switcher inside the app: 3px padding, selected tab #1A2233 with 1px inset border
- Badges: 6px radius, Geist Mono labels; solid badge in live green with near-black text
- Dashboard page vs hero: the hero window is fully dark; the standalone dashboard page is the same app with a dark #0E131D sidebar (blue active item) and a light #F6F7FB content area, mono table headers
- CTA: near-black #0D1321 panel with a blue radial glow from the top and a blue button
- Mobile featured card and onboarding art: dark mini windows with traffic-light dots; floating tab bar in #0D1321 with blue active icon
- Showcase frame: dark chrome bar holding a .ui-tabs strip; clicking a tab must at least toggle aria-selected
- Sign-up form: the aside is a framed mini window (chrome dots + mono URL pill such as app.<brand>.com/new + LIVE) showing a live preview of the workspace being created
- Mono labels: Geist Mono for Latin URLs, numbers and LIVE; the mono stack ends with Noto Sans Thai so Thai text in mono slots never falls back to a system font (Thai eyebrows and badges switch to the body font)
- Allowed off-token extras: primary ring/hover #084CB8, outer window ring rgba(255,255,255,.6), window border and chrome rule #1E2738, chrome bar #10151F, plus the scoped dark window set above

## Layout for this web page
Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer.
Hero: centred headline with the product visual below it. Navigation: bar style. Sections in order: hero → logos → showcase → features → steps → testimonials → pricing → cta. Feature section as alternating.
Centred hero (eyebrow, headline, lead, two CTAs) followed immediately by the big interactive app window and a one-line caption telling people to click around. Then a muted logo row, a showcase section with a framed, tabbed preview, at most three alternating feature rows, each with a framed mini window that has a tab strip or hotspot, and a ‘try it’ ghost link, numbered steps, short testimonials, pricing and a dark CTA. Keep the product readable at all times — no blur, no skeletons, real names and numbers. Stack: plain HTML/CSS plus a small vanilla <script> (≤40 lines) for tab switching is expected; no frameworks. The hero's view tabs must swap panels (JS or radio inputs) and set aria-selected.

## Content
Use realistic product copy (fictional brand) suited to: Product-led SaaS with a self-serve trial. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match.

## Do
- Use real-looking data (names, numbers, dates) in the demo, never lorem ipsum
- Keep the demo window at 100% of the container width with a 1px frame and a deep soft shadow
- Give at least one obvious affordance: tabs, hotspots or a cursor
- Respect prefers-reduced-motion for the cursor and pulses

## Don't
- Don’t use a static flat screenshot with no hint of interaction
- Don’t blur or skeleton the product — it has to be readable
- Don’t add decorative illustrations that compete with the app window
- A flat static screenshot or a vague illustration in the hero
- Lorem ipsum, blurred or skeleton placeholder UI inside the demo
- Making the whole page dark and glowing (that reads as Linear-style dark SaaS)
- Many alternating feature rows with static screenshots and no interaction (that is Feature-Rich Showcase)
- Motion that ignores prefers-reduced-motion or loops faster than every few seconds

## Stack notes
One self-contained HTML file with a <style> block. Declare all tokens as CSS custom properties on :root and build every component from them. No frameworks.

## Acceptance checklist
- Someone who knows the "Interactive Product Demo" style recognises it at a glance from the signature details.
- Every colour, radius, border and shadow comes from the tokens above.
- Thai and English text both render in their intended fonts with comfortable line-height.
- Text contrast meets WCAG AA (4.5:1 body, 3:1 large text) unless the style explicitly trades this off.
- Interactive elements have hover, focus-visible and pressed states in the style's language.
```