Cursor

Copyimport { Cursor } from "@/components/ui/cursor";
import { useCursorPath } from "@/components/framecn/use-cursor-path";
 
const style = useCursorPath([
  { at: 0, x: 80, y: 60 },
  { at: 40, x: 280, y: 160, duration: 28 },
  { at: 72, x: 280, y: 160, click: true, duration: 0 },
]);
 
<Cursor style={style} variant="pointer" />;

Copyimport { H, W } from "@/lib/customizer-config";
import { Cursor } from "@/components/framecn/cursor";
import { useCursorPath } from "@/components/framecn/use-cursor-path";
import { Button } from "@/components/framecn/button";
import { useButtonTransition } from "@/components/framecn/use-button-transition";
 
const BTN_X = W / 2;
const BTN_Y = H / 2;
 
const cursorStyle = useCursorPath([
  { at: 0, x: 80, y: 60 },
  { at: 40, x: BTN_X, y: BTN_Y, duration: 28 },
  { at: 72, x: BTN_X, y: BTN_Y, click: true, duration: 0 },
]);
 
const buttonStyle = useButtonTransition([
  { at: 40, state: "hover", duration: 16 },
  { at: 68, state: "press", duration: 8 },
  { at: 76, state: "loading", duration: 6 },
  { at: 108, state: "success", duration: 16 },
]);
 
<div style={{ position: "relative", width: "100%", height: "100%" }}>
  <div
    style={{
      position: "absolute",
      left: "50%",
      top: "50%",
      transform: "translate(-50%, -50%)",
    }}
  >
    <Button label="Continue" style={buttonStyle} />
  </div>
  <Cursor style={cursorStyle} variant="arrow" />
</div>;