Roller Break Reduce

An animated multi-stage pipeline indicator styled as a flour mill's roller system, where a stream of particles shrinks in size each time it passes through a pair of spinning corrugated rollers.

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

import { RollerBreakReduce } from "@/components/ui/roller-break-reduce";

export default function RollerBreakReduceDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background">
      <RollerBreakReduce className="h-72 w-full max-w-2xl" activeStage={1} />
    </div>
  );
}