# Oversized Cursor

> Técnica de estilo propio de HyperFrames: un cursor macOS de tamaño exagerado que entra desde fuera de cuadro, apunta con la punta, hace click para ignitar la siguiente acción y sale físicamente.

Fuente: https://skillsagentes.com/skills/heygen-com/hyperframes/oversized-cursor
Markdown: https://skillsagentes.com/skills/heygen-com/hyperframes/oversized-cursor.md

Repositorio: https://github.com/heygen-com/hyperframes
Autor: heygen-com
Licencia: Apache-2.0
Actualizado: hace 2 meses
Coste de contexto: 140 tok instalada, 1.6k tok al activarse, 1.6k tok con todos los archivos del bundle
Bundle: 1 archivo, 6 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add heygen-com/hyperframes --skill oversized-cursor --agent claude-code
# Cursor
npx -y skills add heygen-com/hyperframes --skill oversized-cursor --agent cursor
# Codex
npx -y skills add heygen-com/hyperframes --skill oversized-cursor --agent codex
# Gemini CLI
npx -y skills add heygen-com/hyperframes --skill oversized-cursor --agent gemini
# Windsurf
npx -y skills add heygen-com/hyperframes --skill oversized-cursor --agent windsurf
# Cline
npx -y skills add heygen-com/hyperframes --skill oversized-cursor --agent cline
```

## Qué hace

- Aplica un pointer macOS de tamaño exagerado (7cqw a pantalla completa) como protagonista visual en escenas de UI
- Define la ley de entrada: el cursor siempre entra desde fuera de pantalla en un vector continuo, nunca con fade u opacidad
- Especifica el tip-targeting y el tap de click con transformOrigin fijo y ratio de compresión/expansión 1:2
- Hace que el click ignite el siguiente beat (morph, typing, transición) en el mismo frame
- Define las dos salidas físicas sancionadas: salir de cuadro o handoff cut-the-curve entre escenas

## Cuándo usarla

- La escena involucra cursores o una acción guiada por puntero
- Se está iniciando una escena de UI
- Se necesita ignitar un morph, transición o typing run con un click
- La escena se ve estática, muerta o obsoleta y necesita una fuente barata de movimiento

## Qué la activa

- "Añade un cursor grande que haga click para iniciar la transición de esta escena"
- "Esta escena de UI se siente estática, dale movimiento con un cursor"
- "Crea el handoff de cursor entre estas dos escenas del video de lanzamiento"

## Archivos

- SKILL.md — 6 KB

## SKILL.md

Reproducido tal cual desde heygen-com/hyperframes bajo Apache-2.0. Esta sección es el documento original y está en inglés.

# Oversized Cursor — the eye-carrier

A deliberately oversized macOS-style pointer that travels the frame as a _visible
protagonist_: it enters from off-screen, walks the viewer's eye to the next point of
interest, clicks to cause the next thing that happens, and leaves. Production-proven
across multiple launch films.

**Why it exists.** Big cursor movement is one of the cheapest high-yield motion sources
in a launch video: one element, transform-only tweens, and it (1) brings the eye across
the screen on scenes that would otherwise read as dead, (2) gives causal ignition to
morphs/transitions ("the click did that"), and (3) segments the eye out of a stale
state when kicking off a new scene or a complex animation sequence. Bigger is better —
an actual-size cursor disappears at video scale.

## Size & look (house convention)

- **Full-frame scenes: `7cqw`** (≈134px at 1920). In-mock / small-frame variants:
  `4.6–5.5cqw`. Never smaller.
- One SVG arrow geometry everywhere. Two proven fills — white body + black stroke, or
  black body (`#1c1c1c`) + white stroke (1.4px). Pick per scene contrast, keep it
  constant per film.
- **Brand-motif cursors (the power play).** The macOS arrow is the DEFAULT, not a
  mandate. When the subject brand has a recognizable cursor identity — a collaborative
  design tool's colored multiplayer arrow with a name tag (Figma-style), a creative
  suite's precision crosshair, a distinctive product pointer — use THAT cursor instead:
  instantly legible brand language for anyone who knows the product. Same laws apply
  unchanged (oversized scale, physical entry/exit, tip-targeting, click-ignition), and
  a name-tag variant travels as one rigid unit (tag trailing the arrow). Reach for it
  only when the motif is genuinely referenceable; a cursor nobody recognizes is just a
  weird arrow — default back to macOS.
- `filter: drop-shadow(0 4px 6px rgba(0,0,0,.3))`, `pointer-events: none`,
  `z-index` above all scene content, `will-change: transform`.

```css
#root .cursor {
  position: absolute;
  left: 48%;
  top: 115%; /* off-screen below — the resting pose IS off-screen */
  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;
}
```

## Entry law — physical, never revealed

The cursor **always enters from off-screen** (canonical: from below, `top:115–120%`)
and travels to its first target in one decelerating glide. It must _feel like it
entered the room_. Never opacity-fade it in at a resting position, never mask-reveal
it — that reads as a glitch (a real, repeatedly observed failure mode).

- Default path: **straight up the y-axis** to the target — no fragmented diagonals.
  A diagonal is fine when it IS the story (entering toward an off-axis target), but it
  is one continuous vector either way.
- `duration: 0.4–0.92s`, `ease: power3.out`, `immediateRender: false` on the fromTo.

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

## Tip-targeting & the click tap

The hot-spot is the arrow TIP, not the box center. Land the **tip** on the target's
center, and pivot all press scaling on the tip: `transformOrigin: '21% 14%'` (for the
house arrow path in a 24-unit viewBox).

Click = asymmetric compress/expand (1:2 ratio reads as a real tap):

```js
tl.to(cursor, { scale: 0.84, duration: 0.1, ease: "power2.in", transformOrigin: "21% 14%" }, t);
tl.to(
  cursor,
  { scale: 1, duration: 0.22, ease: "power2.out", transformOrigin: "21% 14%" },
  t + 0.1,
);
```

**The target's reaction is a separate, parallel tween** (button: `scale: 0.94` + press
color/shadow, starting at the same `t`). Cursor-only taps (e.g. focusing a text input)
get NO target reaction. Pair with `cursor-click-ripple` / `press-release-spring` for
the target side.

## The click IGNITES the next beat

Never let a morph, typing run, window transform, or scene-defining animation simply
_start_. Park the cursor on the trigger and let the click cause it, same-frame:

- click ▸ menu/submenu cascade, toggle flip
- click ▸ typing kickoff into an input
- click ▸ composer morph-down / window shrink
- click ▸ logo ignition / flight launch
- click ▸ play-state flip + UI-life wake in a product mock

During long beats it doesn't own (typing, narration), the cursor **drifts aside**
(0.5–0.9s, `power2.out`) — never sits frozen on top of the action, never wobbles idly.

## Exit law & cross-scene handoff

Two sanctioned exits — both physical, **never an opacity fade in place**:

1. **Leave the frame**: accelerate off the nearest edge with `power2.in`
   (`left:'118%'`, `left:'-12%'`, or `top:'116%'`), 0.5–0.7s.
2. **Cut-the-curve handoff**: in the final ~0.3s before a hard cut, the cursor starts
   accelerating (`power2.in`) toward the NEXT scene's first click point, covering the
   first ~1/3 of that path; the next composition `gsap.set`s the cursor at the
   handoff pose and continues with `power2.out` at matched velocity. The cursor itself
   becomes the carrier element that stitches the seam:

```js
// scene A, last 0.3s — start the journey:
tl.to(cursor, { left: "40.7%", top: "63.7%", duration: 0.3, ease: "power2.in" }, CUT - 0.3);
// scene B, t=0 — finish it at matched velocity:
gsap.set(cursorB, { left: "40.7%", top: "63.7%" });
tl.to(cursorB, { left: "22%", top: "45%", duration: 0.6, ease: "power2.out" }, 0);
```

## Checklist

- [ ] ≥ 7cqw full-frame (4.6–5.5cqw inside a mock) — when unsure, bigger
- [ ] enters from off-screen on one continuous vector (no fade/mask reveal)
- [ ] tip lands on the target center; press pivots on `transformOrigin: '21% 14%'`
- [ ] every click causes something, same-frame
- [ ] drifts aside during beats it doesn't own; zero idle wobble
- [ ] exits physically (off-frame or cut-the-curve handoff) — no fade-in-place

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [heygen-com](https://skillsagentes.com/creators/heygen-com.md) — 25 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Media Use](https://skillsagentes.com/skills/heygen-com/hyperframes/media-use.md): Agent Media OS: resuelve BGM, SFX, imágenes, iconos, logos, voz, gradación de color o LUTs en un archivo local o bloque listo para usar; genera, opera y reutiliza assets en proyectos HyperFrames.
- [Pr To Video](https://skillsagentes.com/skills/heygen-com/hyperframes/pr-to-video.md): Convierte un pull request de GitHub (URL, owner/repo#N o 'este PR') en un video explicativo del cambio de código —changelog, feature, fix o refactor— construido a partir del diff, commits y archivos.
- [Product Launch Video](https://skillsagentes.com/skills/heygen-com/hyperframes/product-launch-video.md): Convierte una URL de producto o marketing, un guion pegado o un brief en un video de lanzamiento/promoción — promos SaaS, revelaciones de funciones, demos, lanzamientos de apps y empresas.
- [Hyperframes](https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes.md): Punto de entrada obligatorio para crear, editar, animar o renderizar video, animaciones o motion graphics con HyperFrames, así como para inspeccionar, validar o publicar proyectos existentes.
- [Hyperframes Cli](https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes-cli.md): Usa el flujo de desarrollo de la CLI de HyperFrames: init, add, catalog, capture, lint, check, snapshot, compare, preview, render, publish, cloud, lambda, feedback, doctor y más; también para diagnosticar fallos de build o render.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)