Video Text

Installation

showLineNumbers

import { VideoText } from "@/registry/magicui/video-text"

showLineNumbers

<div className="relative h-[500px] w-full overflow-hidden">
  <VideoText src="https://cdn.magicui.design/ocean-small.webm">OCEAN</VideoText>
</div>

Prop	Type	Default	Description
`src`	`string`	Required	The video source URL
`as`	`ElementType`	`"div"`	The element type to render for the text
`children`	`ReactNode`	Required	The content to display (will have the video “inside” it)
`className`	`string`	`""`	Additional className for the container
`autoPlay`	`boolean`	`true`	Whether to autoplay the video
`muted`	`boolean`	`true`	Whether to mute the video
`loop`	`boolean`	`true`	Whether to loop the video
`preload`	`"auto" \| "metadata" \| "none"`	`"auto"`	Whether to preload the video
`fontSize`	`string \| number`	`20`	Font size for the text mask
`fontWeight`	`string \| number`	`"bold"`	Font weight for the text mask
`textAnchor`	`string`	`"middle"`	Text anchor for the text mask
`dominantBaseline`	`string`	`"middle"`	Dominant baseline for the text mask
`fontFamily`	`string`	`"sans-serif"`	Font family for the text mask