Cursor Flow

Component

About

An animated cursor that arcs along cubic Bezier paths, pauses, and clicks targets that respond, for building product demo and screen-recording style motion graphics.

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

Code

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

Usage.tsx

import { CursorFlow } from "@/components/ui/cursor-flow";

export default function Default() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-6">
      <div className="overflow-hidden rounded-xl border border-border shadow-sm">
        <div style={{ width: 640, height: 360 }}>
          <div style={{ transform: "scale(0.5)", transformOrigin: "top left" }}>
            <CursorFlow />
          </div>
        </div>
      </div>
    </div>
  );
}