Video Spotlight
A free SaaS product demo section with native video, captions, proof metrics and a premium mask reveal.
Watch the workflow
Let the product story take centre stage
Pair a focused demonstration with the proof people need, then keep captions, native controls and a readable transcript within easy reach.
1
native, familiar player
100%
caption-ready by design
0
autoplay interruptions
Read video transcript
Ambient footage: a purple anemone opens slowly against a dark background. There is no spoken dialogue. The claims and the metrics beside the video carry the product story in text, so nothing here depends on a viewer being able to hear or watch it.
Customise
Code
<ShowcaseVideoSpotlight
title="Let the product story take centre stage"
video={video}
metrics={metrics}
/>Video Spotlight is a free SaaS product demo section for Next.js and Tailwind. It pairs a caption-ready native video with focused product copy, up to three proof metrics, an optional call to action and a visible transcript disclosure, all inside a responsive media-left or media-right layout.
Built with Motion, one timeline opens the video from the chosen mask origin while the media settles from a restrained scale and the supporting groups rise into place. The authored HTML remains complete before enhancement, and reduced-motion or no-JavaScript visitors receive the final unclipped section with the same native controls, captions and transcript.
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/showcase-video-spotlightUsage
import { ShowcaseVideoSpotlight } from "@/components/showcase-video-spotlight";
export function Example() {
return (
<ShowcaseVideoSpotlight
title="See the workflow from first click to approval"
video={{
src: "/demo/product-tour.mp4",
poster: "/demo/product-tour-poster.webp",
label: "Product approval workflow demonstration",
captions: [
{
src: "/demo/product-tour-en.vtt",
srcLang: "en",
label: "English",
default: true,
},
],
transcript: "A complete plain-text transcript of the demonstration.",
}}
metrics={[
{ id: "speed", value: "42%", label: "faster approvals" },
{ id: "handoffs", value: "3.2x", label: "fewer handoffs" },
]}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Watch the workflow" | Introductory label above the section heading. |
| title | string | required | Section heading rendered as an h2. |
| description | string | undefined | Optional supporting product narrative. |
| cta | { label: string; href: string } | undefined | Optional call to action rendered as a real anchor. |
| video | { src: string; poster: string; label: string; captions?: { src: string; srcLang: string; label: string; default?: boolean }[]; transcript?: string } | required | Native video data. Provide captions and a visible transcript whenever the recording contains spoken content. |
| metrics | { id: string; value: string; label: string }[] | [] | Zero to three stable-ID proof points rendered as a semantic list. |
| layout | "media-left" | "media-right" | "media-left" | Desktop composition. Copy always precedes media in the mobile reading order. |
| aspectRatio | number | 16 / 9 | Positive width-to-height ratio used to reserve the media box. |
| maskOrigin | "left" | "right" | "center" | "left" | Edge or centre point from which the media mask opens. |
| revealDuration | number | 0.9 | Reveal duration in seconds, clamped from 0.45 to 1.6. |
| mediaScale | number | 1.04 | Initial media scale, clamped from 1 to 1.08. |
| contentOffset | number | 20 | Supporting content entrance distance in pixels, clamped from 0 to 32. |
| radius | number | 24 | Media corner radius in pixels, clamped from 0 to 40. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Use the playground to swap the media side, change the mask origin and tune reveal duration, starting scale, content travel and radius. Copy, video sources, captions, transcript and proof metrics stay authored in code. Surfaces, borders, type and focus indicators inherit the shared semantic tokens in light and dark themes:
<ShowcaseVideoSpotlight
title="See the workflow from first click to approval"
video={video}
metrics={metrics}
layout="media-right"
maskOrigin="center"
revealDuration={1.1}
mediaScale={1.06}
contentOffset={16}
radius={32}
/>Frequently asked questions
- Is Video Spotlight free for commercial use?
- Yes. Video Spotlight is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Video Spotlight replace the browser video controls?
- No. The component deliberately keeps the native player, keyboard shortcuts and caption menu. It never autoplays or controls playback. The animation is limited to the surrounding mask, media scale and supporting content entrance.
- How should I make a spoken product demonstration accessible?
- Supply one or more WebVTT caption tracks and a matching plain-text transcript. The captions are rendered as native track elements, while the transcript remains ordinary HTML inside a visible disclosure so visitors can read it without playing the video.