Components

Video Text

UI Library:

Text with video background mask effect.

Installation

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

API Reference

This component is built using Motion primitives and includes the following custom props:

VideoText

Prop	Type	Default
`src`	~~string \| string[]~~
`children`	~~ReactNode~~
`className`	~~string~~
`autoPlay`	~~boolean~~	~~true~~
`muted`	~~boolean~~	~~true~~
`loop`	~~boolean~~	~~true~~
`preload`	~~enum~~	~~"auto"~~
`fontSize`	~~string \| number~~	~~"20vw"~~
`fontWeight`	~~string \| number~~	~~"bold"~~
`as`	~~ElementType~~	~~"div"~~
`onPlay`	~~() => void~~
`onPause`	~~() => void~~
`onEnded`	~~() => void~~

Credits

Inspired by Magic UI
Built with Motion.

PreviouseWord Rotate NextSVG Text

On This Page

Installation
API Reference
- VideoText
Credits

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.