║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Video Text date: 2025-04-16 description: A text component with a video background. author: magicui published: true

<ComponentPreview name="video-text-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/video-text

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="video-text" /> </Steps> </TabsContent> </Tabs>

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 |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║