Product Demo Hero
A free interactive product demo hero section for Next.js and React.
Creative launch studio
Turn a rough brief into a launch-ready campaign
Run one focused product action and watch the same workspace resolve its message, assets and launch checks.
Product proof
Launch runway
Atlas / Summer release
Campaign workspace
Campaign canvas
Homepage launch story
Your launch message will compose here.
Brief notes, audience cues and asset signals are ready to resolve.
Customise
Code
<HeroProductDemo
title="Turn a rough brief into a launch-ready campaign"
subtitle="Run one focused product action and see the finished launch canvas."
cta={{ label: "Start a project", href: "/start" }}
secondaryCta={{ label: "Explore the workflow", href: "/workflow" }}
initialVisual={<RoughLaunchBrief />}
resultVisual={<LaunchReadyCanvas />}
/>Product Demo Hero is a free interactive hero section for Next.js and React, styled with Tailwind and animated with Motion. It turns two consumer-supplied states into one stable product workspace where visitors can run and replay a clear proof moment.
The frame reserves both visuals before the transition starts, keeps the active state available to assistive technology and shows the completed result without JavaScript, while reduced motion swaps the workspace immediately and both calls to action remain real keyboard-accessible links.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/hero-product-demoUsage
import { HeroProductDemo } from "@/components/hero-product-demo";
function RoughLaunchBrief() {
return (
<div className="rounded-xl border border-border bg-background p-6">
<p className="text-sm font-medium text-foreground">Campaign brief</p>
<p className="mt-2 text-sm text-muted-foreground">
Product story, supplied assets and audience cues are ready to compose.
</p>
</div>
);
}
function LaunchReadyCanvas() {
return (
<div className="rounded-xl border border-border bg-background p-6">
<p className="text-sm font-medium text-foreground">Launch canvas ready</p>
<p className="mt-2 text-sm text-muted-foreground">
The same brief is composed, checked and ready for approval.
</p>
</div>
);
}
export default function Page() {
return (
<HeroProductDemo
eyebrow="Creative launch studio"
title="Turn a rough brief into a launch-ready campaign"
subtitle="Run one focused product action and see the finished launch canvas."
cta={{ label: "Start a project", href: "/start" }}
secondaryCta={{ label: "Explore the workflow", href: "/workflow" }}
initialVisual={<RoughLaunchBrief />}
resultVisual={<LaunchReadyCanvas />}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | undefined | Optional context rendered above the headline. |
| title | string | required | Hero headline rendered as the section's single h1. |
| subtitle | string | undefined | Optional supporting copy for the product proof moment. |
| cta | { label: string; href: string } | required | Primary call to action rendered as a real anchor. |
| secondaryCta | { label: string; href: string } | undefined | Optional secondary call to action rendered as a real anchor. |
| initialVisual | ReactNode | required | Initial state of the persistent product workspace. |
| resultVisual | ReactNode | required | Completed state of the same persistent workspace. |
| initialLabel | string | "Product demo ready" | Accessible name for the initial preview state. |
| resultLabel | string | "Product demo complete" | Accessible name and polite completion announcement for the result state. |
| runLabel | string | "Run demo" | Visible and accessible label before the proof moment runs. |
| replayLabel | string | "Replay demo" | Visible and accessible label that returns the workspace to its initial state. |
| transitionDistance | number | 20 | State travel in pixels, with non-finite values falling back to 20 and valid values clamped from 0 to 48. |
| glowSize | number | 360 | Decorative halo diameter in pixels, with non-finite values falling back to 360 and valid values clamped from 160 to 560. |
| hueShift | number | 0 | Decorative halo hue rotation in degrees, with non-finite values falling back to 0 and valid values normalised from 0 to 360. |
| frameRadius | number | 24 | Application frame corner radius in pixels, with non-finite values falling back to 24 and valid values clamped from 12 to 32. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Product Demo Hero exposes Tier 3 variables for the stage, application frame, accent and decorative glow. Override them on an ancestor to retheme the proof moment, or use transitionDistance, glowSize, hueShift and frameRadius to tune its real motion and geometry without changing the preview wording.
<HeroProductDemo
title="Turn a rough brief into a launch-ready campaign"
cta={{ label: "Start a project", href: "/start" }}
initialVisual={<RoughLaunchBrief />}
resultVisual={<LaunchReadyCanvas />}
transitionDistance={32}
glowSize={440}
hueShift={45}
frameRadius={28}
/>
:root {
--hero-product-demo-stage: var(--background);
--hero-product-demo-frame: var(--surface);
--hero-product-demo-accent: var(--primary);
--hero-product-demo-glow: var(--ring);
}Frequently asked questions
- Is Product Demo Hero free for commercial use?
- Yes. Product Demo Hero is MIT licensed, so you can use it in personal and commercial projects without attribution.
- How does Product Demo Hero handle accessibility and reduced motion?
- The calls to action are real anchors, Run demo and Replay demo use one focus-retaining button, and the active workspace is exposed as a named region. Hidden states leave the accessibility tree, completion and reset are announced after user actions, and reduced motion changes the workspace immediately without translation, fading or progress interpolation.
- How do I customise the product demo effect?
- Set transitionDistance, glowSize, hueShift and frameRadius to change the real transition and frame geometry. You can also override the hero-product-demo custom properties on any ancestor to retheme the stage, frame, accent and glow.