{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cursor-flow",
  "title": "Cursor Flow",
  "description": "A realistic mouse that arcs along cubic Bezier paths, pauses, and clicks targets that dip in response.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/cursor-flow/index.tsx",
      "content": "\"use client\";\n\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface CursorWaypoint {\n  x: number;\n  y: number;\n  /** If set, the cursor will pause here for this many frames before moving on. */\n  hold?: number;\n  /** If true, a click animation will fire when the cursor reaches this point. */\n  click?: boolean;\n  /** Optional label rendered next to the click target. */\n  label?: string;\n}\n\nexport interface CursorFlowProps {\n  waypoints?: CursorWaypoint[];\n  cursorColor?: string;\n  cursorSize?: number;\n  segmentDuration?: number;\n  background?: string;\n  showTargets?: boolean;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nconst DEFAULT_WAYPOINTS: CursorWaypoint[] = [\n  { x: 200, y: 180 },\n  { x: 540, y: 240, click: true, label: \"Generate\" },\n  { x: 880, y: 360, hold: 8 },\n  { x: 1040, y: 520, click: true, label: \"Publish\" },\n];\n\n/**\n * Cubic Bezier evaluator. Two control points are derived per segment so the\n * trajectory always has a \"belly\" — straight lines between two points are\n * specifically the look we want to avoid.\n */\nfunction cubicBezier(\n  t: number,\n  p0: { x: number; y: number },\n  p1: { x: number; y: number },\n  p2: { x: number; y: number },\n  p3: { x: number; y: number },\n) {\n  const u = 1 - t;\n  const tt = t * t;\n  const uu = u * u;\n  const uuu = uu * u;\n  const ttt = tt * t;\n  return {\n    x: uuu * p0.x + 3 * uu * t * p1.x + 3 * u * tt * p2.x + ttt * p3.x,\n    y: uuu * p0.y + 3 * uu * t * p1.y + 3 * u * tt * p2.y + ttt * p3.y,\n  };\n}\n\n/** Apple-flavoured ease for in-segment motion: slow start, slow end. */\nfunction easeInOut(t: number) {\n  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;\n}\n\n/** Per-segment control points: midpoint perpendicular offset gives a natural arc. */\nfunction controlsFor(\n  a: { x: number; y: number },\n  b: { x: number; y: number },\n  index: number,\n) {\n  const dx = b.x - a.x;\n  const dy = b.y - a.y;\n  const len = Math.hypot(dx, dy) || 1;\n  // Perpendicular unit vector. Alternate sign per segment so the path snakes\n  // instead of always bulging the same way.\n  const sign = index % 2 === 0 ? 1 : -1;\n  const px = (-dy / len) * (len * 0.18) * sign;\n  const py = (dx / len) * (len * 0.18) * sign;\n  // Place control points at 1/3 and 2/3 along the chord, offset perpendicular.\n  return [\n    { x: a.x + dx / 3 + px, y: a.y + dy / 3 + py },\n    { x: a.x + (2 * dx) / 3 + px, y: a.y + (2 * dy) / 3 + py },\n  ];\n}\n\nexport function CursorFlow({\n  waypoints = DEFAULT_WAYPOINTS,\n  cursorColor = \"#fafafa\",\n  cursorSize = 28,\n  segmentDuration = 36,\n  background = \"#0a0a0a\",\n  showTargets = true,\n  speed = 1,\n  className,\n}: CursorFlowProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  // Build the timeline: each segment is segmentDuration frames, with optional\n  // hold time at each waypoint.\n  type SegmentTiming = {\n    startFrame: number;\n    endFrame: number;\n    holdEnd: number;\n  };\n  const timings: SegmentTiming[] = [];\n  let cursorFrame = 0;\n  for (let i = 0; i < waypoints.length - 1; i++) {\n    const start = cursorFrame;\n    const end = start + segmentDuration;\n    const holdEnd = end + (waypoints[i + 1].hold ?? 0);\n    timings.push({ startFrame: start, endFrame: end, holdEnd });\n    cursorFrame = holdEnd;\n  }\n\n  // Find the active segment.\n  let pos = { x: waypoints[0].x, y: waypoints[0].y };\n  let activeWaypointIndex = 0;\n  for (let i = 0; i < timings.length; i++) {\n    const { startFrame, endFrame, holdEnd } = timings[i];\n    if (frame >= startFrame && frame < endFrame) {\n      const t = easeInOut((frame - startFrame) / segmentDuration);\n      const a = waypoints[i];\n      const b = waypoints[i + 1];\n      const [c1, c2] = controlsFor(a, b, i);\n      pos = cubicBezier(t, a, c1, c2, b);\n      activeWaypointIndex = i;\n      break;\n    } else if (frame >= endFrame && frame < holdEnd) {\n      pos = { x: waypoints[i + 1].x, y: waypoints[i + 1].y };\n      activeWaypointIndex = i + 1;\n      break;\n    } else if (frame >= holdEnd) {\n      pos = { x: waypoints[i + 1].x, y: waypoints[i + 1].y };\n      activeWaypointIndex = i + 1;\n    }\n  }\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background,\n        fontFamily: FONT_FAMILY,\n      }}\n    >\n      {/* Click targets */}\n      {showTargets &&\n        waypoints.map((wp, i) => {\n          if (!wp.click) return null;\n          // Find when the cursor reaches this waypoint and trigger the press scale.\n          const timing = timings[i - 1];\n          const arrivalFrame = timing ? timing.endFrame : 0;\n          return (\n            <ClickTarget\n              key={i}\n              x={wp.x}\n              y={wp.y}\n              label={wp.label}\n              arrivalFrame={arrivalFrame}\n              currentFrame={frame}\n              fps={fps}\n            />\n          );\n        })}\n\n      {/* Cursor */}\n      <Cursor\n        x={pos.x}\n        y={pos.y}\n        size={cursorSize}\n        color={cursorColor}\n        currentFrame={frame}\n        fps={fps}\n        clickFrames={timings\n          .map((t, i) => (waypoints[i + 1].click ? t.endFrame : -1))\n          .filter((f) => f >= 0)}\n      />\n\n      {/* Cursor active marker just for context — small dot at active waypoint */}\n      <div\n        style={{\n          position: \"absolute\",\n          width: 6,\n          height: 6,\n          left: waypoints[activeWaypointIndex].x - 3,\n          top: waypoints[activeWaypointIndex].y - 3,\n          borderRadius: \"50%\",\n          background: \"rgba(255,255,255,0.04)\",\n          pointerEvents: \"none\",\n        }}\n      />\n    </div>\n  );\n}\n\nfunction Cursor({\n  x,\n  y,\n  size,\n  color,\n  currentFrame,\n  fps,\n  clickFrames,\n}: {\n  x: number;\n  y: number;\n  size: number;\n  color: string;\n  currentFrame: number;\n  fps: number;\n  clickFrames: number[];\n}) {\n  // Find nearest click moment within ±4 frames; press scale if so.\n  let scale = 1;\n  for (const cf of clickFrames) {\n    const delta = currentFrame - cf;\n    if (delta >= 0 && delta <= 4) {\n      // 4-frame hard press: 1 → 0.85 → 1\n      const press = spring({\n        frame: delta,\n        fps,\n        config: { damping: 22, stiffness: 320, mass: 0.5 },\n      });\n      scale = interpolate(press, [0, 1], [0.85, 1]);\n      break;\n    }\n  }\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      style={{\n        position: \"absolute\",\n        left: x,\n        top: y,\n        transform: `scale(${scale})`,\n        transformOrigin: \"0 0\",\n        zIndex: 9999,\n        filter: \"drop-shadow(0 4px 12px rgba(0,0,0,0.6))\",\n        pointerEvents: \"none\",\n      }}\n    >\n      <path\n        d=\"M3 2 L3 18 L7 14 L10 21 L13 20 L10 13 L17 13 Z\"\n        fill={color}\n        stroke=\"#0a0a0a\"\n        strokeWidth=\"1.2\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction ClickTarget({\n  x,\n  y,\n  label,\n  arrivalFrame,\n  currentFrame,\n  fps,\n}: {\n  x: number;\n  y: number;\n  label?: string;\n  arrivalFrame: number;\n  currentFrame: number;\n  fps: number;\n}) {\n  // Synced press: when the cursor scales to 0.85, the target dips to 0.98.\n  const delta = currentFrame - arrivalFrame;\n  let pressScale = 1;\n  if (delta >= 0 && delta <= 6) {\n    const t = spring({\n      frame: delta,\n      fps,\n      config: { damping: 18, stiffness: 280 },\n    });\n    pressScale = interpolate(t, [0, 1], [0.98, 1]);\n  }\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        left: x - 70,\n        top: y - 22,\n        transform: `scale(${pressScale})`,\n        transformOrigin: \"center\",\n        padding: \"10px 18px\",\n        borderRadius: 10,\n        background: \"#fafafa\",\n        color: \"#0a0a0a\",\n        fontSize: 14,\n        fontWeight: 600,\n        boxShadow: \"0 12px 30px rgba(0,0,0,0.4)\",\n        pointerEvents: \"none\",\n      }}\n    >\n      {label ?? \"Click\"}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/cursor-flow.tsx"
    }
  ],
  "type": "registry:component"
}