Function CursorExampleScene

components/docs/examples/cursor-example.tsx:23–57

(p: CursorExampleProps = {})

] as const;

export const CursorExampleScene = (p: CursorExampleProps = {}) => {
  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 },
  ]);

  return (
    <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={p.variant ?? "arrow"}
        size={p.size ?? 28}
        rippleColor={p.rippleColor}
      />
    </div>
  );
};

export const cursorExampleCode = (
  values: Record<string, unknown> = {},