About
A headline whose letters are filled with a looping video instead of flat color, while staying real, selectable text for screen readers.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Video Text to your project and fits it to your theme.
Code
How Video Text is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import VideoText from "@/components/ui/flip-text";
export default function VideoTextDemo() {
return (
<div className="flex w-full items-center justify-center p-10">
<div style={{ width: "100%", maxWidth: 760 }}>
<VideoText
as="h3"
text="MOTION TYPE"
src="https://cdn.21st.dev/assets/localized/0cd83d944a6ca7822b4a8306cecc60a36e859b041f6702c6a1ad9ead78924451.mp4"
className="demo-videotext"
/>
<p className="mt-2 text-muted-foreground">
A headline with a looping video playing inside its letters.
</p>
<style>
{
".demo-videotext { margin: 0; font-size: clamp(44px, 12.5vw, 116px); white-space: nowrap; font-weight: 800; line-height: .9; letter-spacing: -.05em; color: var(--foreground); }"
}
</style>
</div>
</div>
);
}