Scatter Rewind

Text 7

About

An animated headline that disintegrates into scattering dust particles and can rewind itself back together, triggered by hover, click, scroll, or entering the viewport.

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

Code

How Scatter Rewind is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ScatterRewind from "@/components/ui/scatter-rewind";

export default function ScatterRewindDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-[#050505] px-6 text-[#ededed]">
      <ScatterRewind
        text="Built to be undone"
        trigger="hover"
        windAngle={-15}
        className="text-center font-semibold tracking-[-0.03em] text-[48px] md:text-[80px]"
      />
    </div>
  );
}