Video Text

A video with text overlay that displays content inside the video. It resizes text based on the viewport and masks the video to show only within the text. Use it to create visually engaging video backgrounds with readable text.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/video-text

npx layro-cli add @magicuidesign/video-text

npx layro-cli add @magicuidesign/video-text

bunx layro-cli add @magicuidesign/video-text

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import React, {
  useEffect,
  useState,
  type ElementType,
  type ReactNode,
} from "react"

import { cn } from "@/lib/utils"

export interface VideoTextProps {
  /**
   * The video source URL