oversized-cursor

Implements oversized macOS-style cursor animations for HyperFrames HTML video scenes.

43.5k|4.2k|Updated Mar 10, 2026
One-click install
npx skills add https://github.com/heygen-com/hyperframes --skill oversized-cursor
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: oversized-cursor
Source: https://github.com/heygen-com/hyperframes/tree/main/.agents/skills/oversized-cursor
Command: npx skills add https://github.com/heygen-com/hyperframes --skill oversized-cursor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI scenes in launch videos often read as static or dead, and morphs or transitions that start without a visible cause feel arbitrary. This Skill provides a house-style oversized cursor technique that carries the viewer's eye across the frame and gives every animation a causal trigger.

Core Features & Use Cases

  • Cursor sizing and styling conventions: Enforces 7cqw full-frame (4.6-5.5cqw in-mock) sizing, proven fill variants, drop-shadow, and brand-motif cursor options such as Figma-style multiplayer arrows.
  • Physical entry and exit laws: Defines off-screen entry with decelerating glides, off-frame exits, and cut-the-curve cross-scene handoffs that stitch scene seams at matched velocity.
  • Click-ignition choreography: Specifies tip-targeting with transformOrigin pivoting, asymmetric click taps, and same-frame ignition of morphs, typing runs, and transitions.
  • Use Case: When building a product demo scene where a button click triggers a menu cascade, use this Skill to animate an oversized cursor entering from below, landing its tip on the button, tapping it, and igniting the cascade in the same frame.

Quick Start

Use the oversized-cursor skill to add a house-style cursor that enters from off-screen, clicks the submit button, and ignites the form morph in my HyperFrames scene.

Frequently Asked Questions about oversized-cursor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate a cursor click in a HyperFrames video scene?

Land the cursor tip on the target center, then run an asymmetric compress/expand tween: scale to 0.84 over 0.1s with power2.in, then back to 1 over 0.22s with power2.out, pivoting on transformOrigin 21% 14%. Start the target's reaction tween at the same timestamp.

What size should a cursor be in a product demo video?

Use 7cqw (about 134px at 1920 width) for full-frame scenes and 4.6-5.5cqw inside smaller UI mocks. Actual-size cursors disappear at video scale, so when unsure, go bigger.

Can I use a brand-specific cursor instead of the macOS arrow?

Yes, when the subject brand has a recognizable cursor identity, such as a Figma-style colored multiplayer arrow with a name tag, use that instead. The same laws apply: oversized scale, physical entry and exit, tip-targeting, and click-ignition.

Why does my cursor animation look glitchy when it appears?

Fading or mask-revealing a cursor into a resting position reads as a glitch. The cursor must always enter physically from off-screen, typically from below at top 115%, traveling to its first target in one decelerating glide with power3.out easing.

How do I transition a cursor between two video scenes?

Use the cut-the-curve handoff: in the final 0.3s before a hard cut, accelerate the cursor with power2.in toward the next scene's first click point, then gsap.set it at that pose in the next composition and continue with power2.out at matched velocity.