Video Text
Text whose glyphs are filled with a playing background video, falling back to a self-contained animated gradient when no video is given.
Uses an SVG text mask to clip a video (or the built-in flowing gradient) into the glyph shapes. The larger and heavier the type, the more image area shows through and the stronger the effect.
npx shadcn@latest add https://webberui.com/r/video-text.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<VideoText />
Installation
npx shadcn@latest add https://webberui.com/r/video-text.jsonOr, once registries are configured in components.json, install it as @webberui/video-text.
Usage
Put the component inside a bounded container with an explicit height; without a src it fills the text with the built-in animated gradient.
import { VideoText } from "@/components/ui/video-text";
<div className="relative h-[220px] w-full overflow-hidden rounded-xl bg-neutral-950">
<VideoText text="WEBBER" className="h-full w-full" />
</div>To fill it with a real video, pass src (a short muted, looping clip is recommended):
<VideoText
text="OCEAN"
src="/videos/waves.mp4"
poster="/videos/waves.jpg"
className="h-full w-full"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text to fill; short, bold words work best |
src | string | undefined | Video source; the built-in animated gradient is used when omitted |
poster | string | undefined | Static frame image, shown under reduced motion or before loading |
fontSize | number | 0.78 × container height | Font size (px); scales automatically when unspecified |
fontWeight | number | string | 900 | Font weight |
fontFamily | string | system font | The mask font; a system font is recommended to avoid missing glyphs |
colors | string[] | pink / indigo / teal | Colors of the built-in gradient fill (used when there is no src) |
Accessibility
- The complete text is exposed
sr-onlyfor assistive technology to announce, and everything inside the mask isaria-hidden - When the user has "reduce motion" enabled, the video pauses on its first frame and the built-in gradient draws a single static frame
- The mask SVG is generated from the container's actual pixel size, so glyphs and imagery align
1:1and do not distort when scaled