Video Text
A premium layout component masking background video layers inside the typography outline.
Preview
Installation
pnpm dlx vibe-ui-kit@latest add video-text
Examples
Vertical Video Text
Usage
import { VideoText } from "@/components/ui/video-text"<VideoText src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
VIBE
</VideoText>Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | "" | Video URL to render inside typography mask |
children | ReactNode | "" | Text content displayed as the video mask |
direction | "horizontal" | "vertical" | "horizontal" | Controls text layout orientation and motion direction |
fontSize | string | number | 20 | Font size applied to text SVG mask |
autoPlay | boolean | true | Whether the video starts playing automatically |
muted | boolean | true | Mutes video audio for autoplay support |
loop | boolean | true | Loops video playback continuously |
className | string? | "" | Additional classes for the container |
This VideoText component masks background video layers inside typography outlines for high-impact visual headings.
Contributors
JS
Jenish Sabhadiya