Video Glow Lightbox React component
A single video card with a pulsing glow-blob frame that morphs into a fullscreen lightbox on click, supports direct URL, YouTube, Vimeo, or uploaded files, a cursor-following watch label, hover preview loop, and a Web Audio sound-reactive glow.
About the Video Glow Lightbox component
Video Glow Lightbox is a free video thumbnail card framed by a soft, pulsing color glow that opens the video in a fullscreen overlay on click. With lightboxTransition="morph" the card itself expands into the player; "fade" pops the player up instead. It plays YouTube and Vimeo links as embeds and direct video URLs or uploaded files in a native player with controls.
The card is a focusable role="button" that opens on Enter or Space. The overlay is a role="dialog" with aria-modal that takes focus, traps Tab inside, closes on Escape, the close button or a backdrop click, and returns focus to the card. Optional extras are a cursor-following "Watch" label (showCursorLabel), a muted looping preview after hovering for hoverPreviewDelay ms (enableHoverPreview), and soundReactiveGlow, which uses the Web Audio API to pulse the lightbox glow with the soundtrack of direct video files. The idle glow pulse stops under prefers-reduced-motion.
When to use it
Use it for a showreel, product launch trailer, testimonial video or course preview on a landing page, where one clickable video card should draw attention.
For an inline player with custom controls, use Liquid Glass Video.
Installation
Add the Video Glow Lightbox component to your project with the shadcn CLI. It lands in components/video-glow-lightbox.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/video-glow-lightboxOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<VideoGlowLightbox /> accepts 33 props, all optional.
| Prop | Type | Default |
|---|---|---|
| videoType | "url" | "youtube" | "vimeo" | "file" | "url" |
| videoUrl | string | "" |
| videoFile | string | "" |
| thumbnailImage | string | — |
| glowColor | string | "#3633FF" |
| glowIntensity | number | 55 |
| glowBlur | number | 48 |
| glowSpread | number | 20 |
| glowAnimation | boolean | true |
| glowAnimationSpeed | number | 3 |
| borderRadius | number | 16 |
| borderWidth | number | 1.5 |
- videoType"url" | "youtube" | "vimeo" | "file"Default: "url"
- videoUrlstringDefault: ""
- videoFilestringDefault: ""
- thumbnailImagestring
- glowColorstringDefault: "#3633FF"
- glowIntensitynumberDefault: 55
- glowBlurnumberDefault: 48
- glowSpreadnumberDefault: 20
- glowAnimationbooleanDefault: true
- glowAnimationSpeednumberDefault: 3
- borderRadiusnumberDefault: 16
- borderWidthnumberDefault: 1.5
Show all 33 propsShow fewer
| borderColor | string | "rgba(107, 51, 255, 0.5)" |
| frameBackground | string | "#000000" |
| overlayColor | string | "rgba(0,0,0,0.88)" |
| lightboxBorderRadius | number | 14 |
| lightboxMaxWidth | number | 900 |
| lightboxGlow | boolean | true |
| lightboxTransition | "morph" | "fade" | "morph" |
| aspectRatio | string | "16/9" |
| innerGlowSize | number | 18 |
| showPlayButton | boolean | true |
| playButtonSize | number | 64 |
| playButtonColor | string | "#ffffff" |
| showCursorLabel | boolean | false |
| cursorLabelText | string | "Watch" |
| cursorLabelBg | string | "#ffffff" |
| cursorLabelColor | string | "#0a0a0a" |
| enableHoverPreview | boolean | false |
| hoverPreviewDelay | number | 400 |
| soundReactiveGlow | boolean | false |
| soundReactiveIntensity | number | 3.5 |
| className | string | — |
- borderColorstringDefault: "rgba(107, 51, 255, 0.5)"
- frameBackgroundstringDefault: "#000000"
- overlayColorstringDefault: "rgba(0,0,0,0.88)"
- lightboxBorderRadiusnumberDefault: 14
- lightboxMaxWidthnumberDefault: 900
- lightboxGlowbooleanDefault: true
- lightboxTransition"morph" | "fade"Default: "morph"
- aspectRatiostringDefault: "16/9"
- innerGlowSizenumberDefault: 18
- showPlayButtonbooleanDefault: true
- playButtonSizenumberDefault: 64
- playButtonColorstringDefault: "#ffffff"
- showCursorLabelbooleanDefault: false
- cursorLabelTextstringDefault: "Watch"
- cursorLabelBgstringDefault: "#ffffff"
- cursorLabelColorstringDefault: "#0a0a0a"
- enableHoverPreviewbooleanDefault: false
- hoverPreviewDelaynumberDefault: 400
- soundReactiveGlowbooleanDefault: false
- soundReactiveIntensitynumberDefault: 3.5
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Video Glow Lightbox FAQ
- How do I use a YouTube or Vimeo video?
- Pass the link as videoUrl; with the default videoType="url", youtube.com, youtu.be, Shorts and vimeo.com links are detected and embedded. For an uploaded file, set videoType="file" and videoFile.
- Does the sound-reactive glow work with YouTube?
- No. soundReactiveGlow only works for direct video files, because the audio has to be read by the Web Audio API; cross-origin files also need CORS headers, and without them the glow stays static.
- How big is the card?
- It fills its parent's width and height, so give the wrapper a size or an aspect ratio. aspectRatio (default "16/9") and lightboxMaxWidth (default 900) shape the fullscreen player.
- How do I change the glow?
- glowColor, glowIntensity (0 to 100, default 55), glowBlur, glowSpread and glowAnimationSpeed tune it; glowAnimation={false} keeps it steady.
