Subchapter 18.75

Cursor Click Ripple

rules/cursor-click-ripple.mdMarkdown6 KBView on GitHub

An animated cursor moves to a target element, performs a click with visual depression, and emits expanding ripple rings from the click point. Three sequential phases on one timeline: move (eased translation to the target’s center) → click (scale depression on cursor + target together, yoyo back) → ripple (1–3 staggered rings expand and fade from the click point). This is a point event at one location — a sustained hold across space is cursor-drag.md.

Recipe

Cursor Click Ripple · Hyperframes Animation · heygen-com/hyperframes · Skills Docs

<button class="target-button">{ctaLabel}</button>
<div class="cursor"><!-- arrow SVG, positioned at the entry corner --></div>
<!-- Rings live in DOM from t=0 at the click-target CENTER, scale 0 + opacity 0 -->
<div class="ripple ripple-1"></div>
<div class="ripple ripple-2"></div>
<div class="ripple ripple-3"></div>

.ripple {
  position: absolute;
  left: 50%;
  top: 50%; /* click-target center */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid {rippleColor};
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

// Phase 1 — Move: eased, not linear
tl.to(".cursor", { x: TARGET_X, y: TARGET_Y, duration: MOVE_DUR, ease: MOVE_EASE }, 0);

// Phase 2 — Click: cursor + target depress together, then return
tl.to(
  ".cursor",
  { scale: CURSOR_PRESS_SCALE, duration: PRESS_DUR, ease: "power2.in", yoyo: true, repeat: 1 },
  CLICK_AT,
);
tl.to(
  ".target-button",
  { scale: TARGET_PRESS_SCALE, duration: PRESS_DUR, ease: "power2.in", yoyo: true, repeat: 1 },
  CLICK_AT,
);

// Phase 3 — Ripple burst, N rings staggered from the click point
tl.set([".ripple-1", ".ripple-2", ".ripple-3"], { opacity: 1 }, RIPPLE_AT);
tl.to(
  [".ripple-1", ".ripple-2", ".ripple-3"],
  {
    scale: RIPPLE_SCALE,
    opacity: 0,
    duration: RIPPLE_DUR,
    ease: RIPPLE_EASE,
    stagger: RIPPLE_STAGGER,
    immediateRender: false, // holds scale 0 / opacity 0 until the click moment
  },
  RIPPLE_AT,
);

token	range	notes
MOVE_DUR	0.4–1.0 s	short darts; long reads as a “considered click.” Must end before CLICK_AT or it reads as a misclick
MOVE_EASE	discrete choice	`power2.inOut` calm · `power3.out` decisive · `back.out(1.2–1.4)` settles onto the button with a tiny recoil (higher reads cartoonish)
CLICK_AT	`MOVE_DUR + 0–0.3 s`	zero pause reads as autopilot; >0.3 s reads as hesitation
PRESS_DUR	0.06–0.12 s (half; yoyo ×2)	short crisp, long mushy; must finish before the next phase needs normal scale
CURSOR / TARGET_PRESS_SCALE	0.80–0.90 / 0.92–0.97	cursor compresses MORE than the target — the cursor is the actor, the target the recipient
RIPPLE_AT	`CLICK_AT + 0–0.08 s`	simultaneous feels causal; slight delay feels acoustic
RIPPLE_DUR	0.5–1.0 s	sharp ping vs soft sonar; must complete before anything that needs the ring gone
RIPPLE_SCALE	3–6	3 stays near the click site; if the ring would exit the frame before fading, lower it
RIPPLE_STAGGER	0.06–0.12 s (or 0)	below ~0.06 s reads as one thick ring; above ~0.12 s as separate events
RIPPLE_EASE	discrete choice	`power2.out` standard ping · `power3.out` sharper attack · `expo.out` strong distant pulse
TARGET_X / TARGET_Y	layout-derived	must match the target’s visual centroid — a 4 px miss reads as missing the button

Cursor Click Ripple

Recipe

Cursor Click Ripple

Recipe

Variations

Values

Critical Constraints

See also