Inversion Circle Scroll Animation

Scroll-driven animation: a black circle rises from below the screen to centre then expands to fill the entire viewport. White text is revealed inside via CSS clip-path creating a colour-inversion effect. Includes a scroll-reveal content section that flips black to white. Self-contained scroll context works in all iframe previews.

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

import PublishedComponent from "@/components/ui/inversion-circle-scroll-animation"

export default function Demo() {
  return <PublishedComponent />
}