Video Text: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add video-text.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Texttext

Font size (px)fontSize

120

Font weightfontWeight

900

TypefacefontFamily

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<VideoText/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/video-text.en.json

Or, 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-only for assistive technology to announce, and everything inside the mask is aria-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:1 and do not distort when scaled

Video Text