oversized-cursor

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

13|17|Updated Jan 30, 2025
One-click install
npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill oversized-cursor-codewithsally
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: oversized-cursor
Source: https://github.com/CodeWithSally/CodeWithSally-Apex-English/tree/main/Sessions/ClaudeCode/Session007/.agents/skills/oversized-cursor
Command: npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill oversized-cursor-codewithsally

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Launch video scenes often read as static or dead, and morphs, transitions, or typing runs 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 click 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 '21% 14%', asymmetric compress/expand tap tweens, and same-frame click-triggered morphs, typing runs, and transitions using GSAP. - Use Case: When building a product launch video scene where a button click kicks off a composer morph, apply this Skill to enter the cursor from off-screen, land its tip on the button, fire the tap tween, and ignite the morph in the same frame. ## Quick Start Use the oversized-cursor skill to add an off-screen-entering oversized cursor that clicks the submit button and ignites the form morph in my launch video 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 product launch video?

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%'. Pair it with a parallel target reaction tween starting at the same time.

What size should a cursor be in a motion design video?

Use 7cqw (about 134px at 1920 width) for full-frame scenes and 4.6-5.5cqw inside smaller product mocks. An actual-size cursor disappears at video scale, so when unsure, go bigger.

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.

Why does a cursor fade-in look wrong in animation?

Opacity-fading or mask-revealing a cursor at a resting position reads as a glitch, an observed failure mode. The cursor must always enter physically from off-screen on one continuous decelerating vector so it feels like it entered the room.

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 unchanged, but default back to the macOS arrow if the motif is not genuinely referenceable.