Cursor Flow

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6const FONT_FAMILY =
7  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
8 
9export interface CursorWaypoint {
10  x: number;
11  y: number;
12  /** If set, the cursor will pause here for this many frames before moving on. */
13  hold?: number;
14  /** If true, a click animation will fire when the cursor reaches this point. */
15  click?: boolean;
16  /** Optional label rendered next to the click target. */
17  label?: string;
18}
19 
20export interface CursorFlowProps {
21  waypoints?: CursorWaypoint[];
22  cursorColor?: string;
23  cursorSize?: number;
24  segmentDuration?: number;
25  background?: string;
26  showTargets?: boolean;
27  speed?: number;
28  fps?: number;
29  durationInFrames?: number;
30  width?: number;
31  height?: number;
32  className?: string;
33}
34 
35const DEFAULT_WAYPOINTS: CursorWaypoint[] = [
36  { x: 200, y: 180 },
37  { click: true, label: "Generate", x: 540, y: 240 },
38  { hold: 8, x: 880, y: 360 },
39  { click: true, label: "Publish", x: 1040, y: 520 },
40];
41 
42// Simplified bezier path through waypoints
43const CURSOR_PATH =
44  "M 200 180 C 350 200, 450 220, 540 240 C 650 260, 750 300, 880 360 C 920 380, 980 460, 1040 520";
45 
46export const CursorFlow = ({
47  waypoints = DEFAULT_WAYPOINTS,
48  cursorColor = "#fafafa",
49  cursorSize = 28,
50  segmentDuration = 36,
51  background = "#0a0a0a",
52  showTargets = true,
53  speed = 1,
54  fps = 30,
55  durationInFrames = 180,
56  width = 1280,
57  height = 720,
58  className,
59}: CursorFlowProps) => {
60  const safeSpeed = Math.max(0.01, speed);
61  const durationMs = (durationInFrames / fps) * 1000;
62  const segmentMs = ((segmentDuration / fps) * 1000) / safeSpeed;
63  const totalPathMs = segmentMs * (waypoints.length - 1);
64 
65  const containerStyle: CSSProperties = {
66    background,
67    fontFamily: FONT_FAMILY,
68    height,
69    overflow: "hidden",
70    position: "relative",
71    width,
72  };
73 
74  return (
75    <Timegroup
76      className={className}
77      duration={`${durationMs}ms`}
78      mode="fixed"
79      style={containerStyle}
80    >
81      <>
82        <style>{`
83          @keyframes framecn-cursor-flow {
84            from { offset-distance: 0%; }
85            to { offset-distance: 100%; }
86          }
87          @keyframes framecn-cursor-click {
88            0%, 100% { transform: scale(1); }
89            50% { transform: scale(0.85); }
90          }
91          @keyframes framecn-target-appear {
92            from { opacity: 0; transform: scale(0.98); }
93// … truncated