Text Prism Split

An interactive headline effect where a frosted glass strip follows the cursor and splits the text beneath it into red/green/blue channel slices that tear apart with drag velocity and spring back into place.

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

import { PrismDragSplit } from "@/components/ui/text-prism-split";

export default function PrismDragSplitDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background">
      <PrismDragSplit text="REFRACTION" className="text-5xl" />
    </div>
  );
}