Text Effects

Video Mask Text

텍스트 마스크 안쪽으로 비디오가 재생되는 타이포그래피 컴포넌트입니다.

Preview

text media

Video Mask Text

video fills the letter mask

Installation

bash

Copied

1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/video-text.json

bash

Copied

1npx shadcn@latest add https://ryong-blog.vercel.app/r/video-text.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong-blog.vercel.app/r/video-text.json

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/r/video-text.json

Code

typescript

Copied

1import { VideoText } from "@/components/video-text"23export default function Example() {4  return <VideoText src="/videos/demo.mp4">VIDEO</VideoText>5}

Props

src

Type: string
Default: -
Description: Video source URL.

children

Type: React.ReactNode
Default: -
Description: Content rendered inside the component.

className

Type: string
Default: -
Description: Additional classes merged onto the component.

autoPlay

Type: boolean
Default: true
Description: Whether to autoplay the video.

muted

Type: boolean
Default: true
Description: Whether to mute the video.

loop

Type: boolean
Default: true
Description: Whether to loop the video.

Prop	Type	Default	Description
src	string	-	Video source URL.
children	React.ReactNode	-	Content rendered inside the component.
className	string	-	Additional classes merged onto the component.
autoPlay	boolean	true	Whether to autoplay the video.
muted	boolean	true	Whether to mute the video.
loop	boolean	true	Whether to loop the video.

Reference

Reference Video Mask Text