Video Testimonial Spotlight
A free video testimonial React section with native controls, captions, a complete transcript and a cinematic masked reveal.
Ready to play
A purple anemone opening against a dark plum background.
38%
increase in qualified product trials
“The new launch page made our value obvious before the first scroll.”
Verified customer outcome
Customise
Code
<QuoteVideoSpotlight {...story} />Video Testimonial Spotlight is a free video testimonial component for React and Next.js, built with Motion and styled with Tailwind, that pairs native media playback with a customer quote and concrete proof metric. The video keeps the browser controls visitors already understand, loads only metadata before interaction, shows a stable poster, includes a default WebVTT captions track and never autoplays. A visible disclosure provides the complete transcript in normal document flow, so the story remains usable when someone cannot hear the audio, cannot play the media or prefers to read.
When the section enters the viewport, Motion opens the media through a configurable clip-path mask while the quote, attribution and metric settle into place with a bounded opacity and translation sequence. Server HTML is already authored in the final visible state, so the enhancement causes no layout shift and content remains complete without JavaScript. Reduced motion removes the mask and translation entirely. If the tab is hidden during playback the component pauses the video once and never resumes it unexpectedly.
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/quote-video-spotlightUsage
import { QuoteVideoSpotlight } from "@/components/quote-video-spotlight";
export function CustomerStory() {
return (
<QuoteVideoSpotlight
videoSrc="/stories/northstar.mp4"
posterSrc="/stories/northstar-poster.jpg"
posterAlt="Maya speaking from the Northstar studio."
captionsSrc="/stories/northstar-captions.vtt"
transcript="We rebuilt our launch page in one afternoon..."
quote="The new page made the value obvious."
attribution="Maya Chen, Co-founder at Northstar"
metric={{ value: "38%", label: "increase in qualified trials" }}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| videoSrc | string | required | Native video source. Playback never starts automatically. |
| posterSrc | string | required | Stable poster image shown before playback. |
| posterAlt | string | required | Poster description exposed near the media and shown visibly if playback fails. |
| captionsSrc | string | required | WebVTT captions track for the canonical language. |
| transcript | string | required | Complete text alternative shown in an accessible disclosure. |
| quote | string | required | Customer quotation displayed in the proof panel. |
| attribution | string | required | Customer name and role. |
| metric | { value: string; label: string } | required | Concrete customer outcome communicated in text. |
| mediaRatio | "16/9" | "4/3" | "1/1" | "16/9" | Stable media aspect ratio. |
| maskOrigin | "center" | "left" | "bottom" | "center" | Direction from which the entrance mask opens. |
| revealDuration | number | 0.8 | Media entrance duration in seconds, clamped to 0.25 through 1.5. |
| panelOffset | number | 28 | Proof-panel entrance distance in CSS pixels, clamped to 0 through 64. |
| radius | number | 28 | Media and proof-panel corner radius in CSS pixels, clamped to 0 through 48. |
| className | string | undefined | Additional classes merged onto the section. |
Customisation
Video Testimonial Spotlight exposes three Tier 3 tokens. Use --video-spotlight-accent for the metric and focus accent, --video-spotlight-panel for the quote surface and --video-spotlight-overlay for the poster label surface. Each falls back to the semantic theme, so light and dark modes work without component changes. Geometry and entrance character are controlled by the mediaRatio, maskOrigin, revealDuration, panelOffset and radius props:
.video-story {
--video-spotlight-accent: var(--accent);
--video-spotlight-panel: var(--muted);
}
<QuoteVideoSpotlight
{...story}
className="video-story"
mediaRatio="4/3"
maskOrigin="left"
revealDuration={1.1}
panelOffset={40}
radius={20}
/>Frequently asked questions
- Is Video Testimonial Spotlight free for commercial use?
- Yes. Video Testimonial Spotlight is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is this video testimonial component accessible without playback?
- Yes. The native video includes browser controls and a default captions track, while a visible button opens the complete transcript in normal document flow. The customer quote, attribution and metric are also text, and a media error leaves all proof and transcript access intact. The poster description becomes visible when playback fails.
- How does Video Testimonial Spotlight handle motion and hidden tabs?
- The media mask and proof-panel entrance run once when the section enters the viewport. With reduced motion enabled the final media and proof appear immediately with no clip-path or translation. If a playing video is hidden by a tab change, the component calls the native pause method once and does not resume when the tab returns.