hyperframes-oversized-cursor

Overview

This skill creates the oversized animated cursor effect popular in product demo and walkthrough videos, as a HyperFrames composition. Use it to draw attention to exact click points and drag gestures in a UI demo. It renders the annotated MP4 from the HTML timeline.

HyperFrames — Oversized Cursor

A deliberately oversized macOS-style pointer that travels the frame as a visible protagonist: enters from off-screen, walks the eye to the next point of interest, clicks to cause the next thing that happens, and leaves.

When to Use

• User wants a cursor in the video (demo, tutorial, UI walkthrough)
• User wants to kick off a UI scene with a cursor click
• User wants to ignite a morph/transition/typing with a click
• User wants to add motion to a static scene (the cursor carries the eye)
• User wants a cross-scene handoff via cursor

When NOT to Use

• User wants a full video workflow (use hyperframes-product-launch-video)
• User wants transitions without a cursor (use hyperframes-cut-the-curve)
• User wants a real hand/finger (not stylized cursor)

Why It Exists

Big cursor movement is one of the cheapest high-yield motion sources: one element, transform-only tweens, and it (1) brings the eye across the screen, (2) gives causal ignition to morphs/transitions, (3) segments the eye out of a stale state. Bigger is better — an actual-size cursor disappears at video scale.

Size & Look

• Full-frame scenes: 7cqw (≈134px at 1920). In-mock / small-frame: 4.6-5.5cqw. Never smaller.

Workflow

1 · Size and style the cursor

#root .cursor {
  position: absolute;
  left: 48%;
  top: 115%;
  width: 7cqw;
  height: 7cqw;
  z-index: 20;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  pointer-events: none;
  will-change: transform;
}

2 · Animate entry from off-screen

tl.fromTo(
  cursor,
  { left: "48.6%", top: "115%" },
  { left: "48.6%", top: "55%", duration: 0.85, ease: "power3.out", immediateRender: false },
  0.25,
);