Video Text

A text component with a video background.

Open in

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

export function VideoTextDemo() {
  return (
    <div className="relative h-[200px] w-full overflow-hidden">
      <VideoText src="https://cdn.magicui.design/ocean-small.webm">
        OCEAN
      </VideoText>
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add @magicui/video-text

Usage

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

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

Props

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`	`"120"`	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

Typing Animation Warp Background

On This Page

Installation Usage Props

Contribute

Limited Time Offer

Ship Faster with Magic UI Pro

Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.

✓

Next.js 15 + TypeScript ready

✓

Copy, paste, customize in minutes

✓

Save 100+ hours of development

$199once

Get Lifetime Access

Trusted by 5,000+ developers