oversized-cursor

Implements oversized macOS-style cursor animations for launch videos using GSAP tweens.

Updated Sep 6, 2026
One-click install
npx skills add https://github.com/AbuBakar125-co/Resturant_web --skill oversized-cursor-abubakar125-co
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: oversized-cursor
Source: https://github.com/AbuBakar125-co/Resturant_web/tree/main/.agents/skills/oversized-cursor
Command: npx skills add https://github.com/AbuBakar125-co/Resturant_web --skill oversized-cursor-abubakar125-co

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 unmotivated. 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 - Oversized cursor conventions: Enforces 7cqw full-frame sizing (4.6-5.5cqw in mocks), proven fill styles, drop-shadow, and brand-motif cursor variants such as Figma-style multiplayer arrows. - Physical entry and exit laws: Cursors always enter from off-screen on one continuous vector and exit off-frame or via a cut-the-curve cross-scene handoff, never fading in place. - Click-ignites-the-next-beat: Tip-targeted clicks with asymmetric compress/expand taps trigger menu cascades, typing runs, morphs, and scene transitions in the same frame. - Use Case: When building a HyperFrames launch video scene where a button click kicks off a composer morph, apply this Skill to animate the cursor entering from below, landing its tip on the button, tapping, and igniting the morph. ## Quick Start Apply the oversized cursor technique to animate a cursor that enters from off-screen, clicks the target button, and triggers the next animation beat 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 that triggers an animation in GSAP?

Park the cursor on the trigger element, then run an asymmetric tap: scale to 0.84 over 0.1s with power2.in, then back to 1 over 0.22s with power2.out, using transformOrigin '21% 14%'. Start the target's reaction tween at the same timestamp so the click causes the next beat.

What size should a cursor be in a launch 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.

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

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

Why does my cursor entrance look like a glitch?

Fading a cursor in at a resting position or mask-revealing it reads as a glitch. The cursor must always enter from off-screen, typically from below at top:115%, traveling to its target in one continuous 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 cut, accelerate the cursor with power2.in toward the next scene's first click point. The next composition gsap.sets the cursor at that pose and continues with power2.out at matched velocity.