Captions Icon

An animated captions/subtitles icon that draws its caption lines on hover, for use in video players, accessibility toggles, or media toolbars.

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

import { CaptionsIcon } from "@/components/ui/lu-captions";

export default function CaptionsIconDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center">
      <CaptionsIcon size={48} />
    </div>
  );
}