Video in Text Effect

Text

About

This is a “video masking in text” technique where a video is clipped within the shape of the text. The background remains plain (typically white or black), while the text displays dynamic video content inside it.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Video in Text Effect to your project and fits it to your theme.

Code

How Video in Text Effect is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { VideoText } from "@/components/ui/video-in-text-effect"; // Adjust path as needed

export default function VideoTextDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center rounded-lg bg-white p-8">
      <VideoText src="https://cdn.21st.dev/assets/mirror/6f/6f1d266b4d9320529feb5beece8f9d9d0a2b3987c05d4f7b5d56841168cad69b.mp4">
        Ravi Katiyar
      </VideoText>
    </div>
  );
}