Video Text

PreviewCode

OCEAN

@/demos/VideoTextDemo.tsx

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

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

Installation

pnpm

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

bun

bunx shadcn@latest add @magicui-solid/video-text

yarn

yarn dlx shadcn@latest add @magicui-solid/video-text

npm

npx shadcn@latest add @magicui-solid/video-text

Import

import { VideoText } from '@/components/magicui/video-text'

Usage

<div class="relative h-125 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	ValidComponent	"div"	The element type to render for the text
children	JSX.Element	Required	The content to display (will have the video “inside” it)
class	string	""	Additional class 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

Original:

magicui.design/docs/components/video-text