{"id":20888,"plugin_id":"plugins_6aa93d4d067c8191bdd2a1969bee8916","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T23:16:38.140Z","digest":"5c886855e85d8ae7ad17ce08259eb0f2950b6b1c73bc6c5b3c0665008772aca8","against":null,"payload":{"description":"House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.","included_files":[],"name":"oversized-cursor","skill_md_contents":"---\nname: oversized-cursor\ndescription: House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.\n---\n\n> Modified by Juicy Lucy AI, UAB for JuicyLucy Ads: CLI invocation, the review-approval reference and/or frontmatter (description layout, upstream-only metadata) adjusted at build time. See the plugin root NOTICE for details.\n\n\n# Oversized Cursor — the eye-carrier\n\nA deliberately oversized macOS-style pointer that travels the frame as a _visible\nprotagonist_: it enters from off-screen, walks the viewer's eye to the next point of\ninterest, clicks to cause the next thing that happens, and leaves. Production-proven\nacross multiple launch films.\n\n**Why it exists.** Big cursor movement is one of the cheapest high-yield motion sources\nin a launch video: one element, transform-only tweens, and it (1) brings the eye across\nthe screen on scenes that would otherwise read as dead, (2) gives causal ignition to\nmorphs/transitions (\"the click did that\"), and (3) segments the eye out of a stale\nstate when kicking off a new scene or a complex animation sequence. Bigger is better —\nan actual-size cursor disappears at video scale.\n\n## Size & look (house convention)\n\n- **Full-frame scenes: `7cqw`** (≈134px at 1920). In-mock / small-frame variants:\n  `4.6–5.5cqw`. Never smaller.\n- One SVG arrow geometry everywhere. Two proven fills — white body + black stroke, or\n  black body (`#1c1c1c`) + white stroke (1.4px). Pick per scene contrast, keep it\n  constant per film.\n- **Brand-motif cursors (the power play).** The macOS arrow is the DEFAULT, not a\n  mandate. When the subject brand has a recognizable cursor identity — a collaborative\n  design tool's colored multiplayer arrow with a name tag (Figma-style), a creative\n  suite's precision crosshair, a distinctive product pointer — use THAT cursor instead:\n  instantly legible brand language for anyone who knows the product. Same laws apply\n  unchanged (oversized scale, physical entry/exit, tip-targeting, click-ignition), and\n  a name-tag variant travels as one rigid unit (tag trailing the arrow). Reach for it\n  only when the motif is genuinely referenceable; a cursor nobody recognizes is just a\n  weird arrow — default back to macOS.\n- `filter: drop-shadow(0 4px 6px rgba(0,0,0,.3))`, `pointer-events: none`,\n  `z-index` above all scene content, `will-change: transform`.\n\n```css\n#root .cursor {\n  position: absolute;\n  left: 48%;\n  top: 115%; /* off-screen below — the resting pose IS off-screen */\n  width: 7cqw;\n  height: 7cqw;\n  z-index: 20;\n  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));\n  pointer-events: none;\n  will-change: transform;\n}\n```\n\n## Entry law — physical, never revealed\n\nThe cursor **always enters from off-screen** (canonical: from below, `top:115–120%`)\nand travels to its first target in one decelerating glide. It must _feel like it\nentered the room_. Never opacity-fade it in at a resting position, never mask-reveal\nit — that reads as a glitch (a real, repeatedly observed failure mode).\n\n- Default path: **straight up the y-axis** to the target — no fragmented diagonals.\n  A diagonal is fine when it IS the story (entering toward an off-axis target), but it\n  is one continuous vector either way.\n- `duration: 0.4–0.92s`, `ease: power3.out`, `immediateRender: false` on the fromTo.\n\n```js\ntl.fromTo(\n  cursor,\n  { left: \"48.6%\", top: \"115%\" },\n  { left: \"48.6%\", top: \"55%\", duration: 0.85, ease: \"power3.out\", immediateRender: false },\n  0.25,\n);\n```\n\n## Tip-targeting & the click tap\n\nThe hot-spot is the arrow TIP, not the box center. Land the **tip** on the target's\ncenter, and pivot all press scaling on the tip: `transformOrigin: '21% 14%'` (for the\nhouse arrow path in a 24-unit viewBox).\n\nClick = asymmetric compress/expand (1:2 ratio reads as a real tap):\n\n```js\ntl.to(cursor, { scale: 0.84, duration: 0.1, ease: \"power2.in\", transformOrigin: \"21% 14%\" }, t);\ntl.to(\n  cursor,\n  { scale: 1, duration: 0.22, ease: \"power2.out\", transformOrigin: \"21% 14%\" },\n  t + 0.1,\n);\n```\n\n**The target's reaction is a separate, parallel tween** (button: `scale: 0.94` + press\ncolor/shadow, starting at the same `t`). Cursor-only taps (e.g. focusing a text input)\nget NO target reaction. Pair with `cursor-click-ripple` / `press-release-spring` for\nthe target side.\n\n## The click IGNITES the next beat\n\nNever let a morph, typing run, window transform, or scene-defining animation simply\n_start_. Park the cursor on the trigger and let the click cause it, same-frame:\n\n- click ▸ menu/submenu cascade, toggle flip\n- click ▸ typing kickoff into an input\n- click ▸ composer morph-down / window shrink\n- click ▸ logo ignition / flight launch\n- click ▸ play-state flip + UI-life wake in a product mock\n\nDuring long beats it doesn't own (typing, narration), the cursor **drifts aside**\n(0.5–0.9s, `power2.out`) — never sits frozen on top of the action, never wobbles idly.\n\n## Exit law & cross-scene handoff\n\nTwo sanctioned exits — both physical, **never an opacity fade in place**:\n\n1. **Leave the frame**: accelerate off the nearest edge with `power2.in`\n   (`left:'118%'`, `left:'-12%'`, or `top:'116%'`), 0.5–0.7s.\n2. **Cut-the-curve handoff**: in the final ~0.3s before a hard cut, the cursor starts\n   accelerating (`power2.in`) toward the NEXT scene's first click point, covering the\n   first ~1/3 of that path; the next composition `gsap.set`s the cursor at the\n   handoff pose and continues with `power2.out` at matched velocity. The cursor itself\n   becomes the carrier element that stitches the seam:\n\n```js\n// scene A, last 0.3s — start the journey:\ntl.to(cursor, { left: \"40.7%\", top: \"63.7%\", duration: 0.3, ease: \"power2.in\" }, CUT - 0.3);\n// scene B, t=0 — finish it at matched velocity:\ngsap.set(cursorB, { left: \"40.7%\", top: \"63.7%\" });\ntl.to(cursorB, { left: \"22%\", top: \"45%\", duration: 0.6, ease: \"power2.out\" }, 0);\n```\n\n## Checklist\n\n- [ ] ≥ 7cqw full-frame (4.6–5.5cqw inside a mock) — when unsure, bigger\n- [ ] enters from off-screen on one continuous vector (no fade/mask reveal)\n- [ ] tip lands on the target center; press pivots on `transformOrigin: '21% 14%'`\n- [ ] every click causes something, same-frame\n- [ ] drifts aside during beats it doesn't own; zero idle wobble\n- [ ] exits physically (off-frame or cut-the-curve handoff) — no fade-in-place\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}