Cursor sobredimensionado — el portador de la mirada
Un puntero macOS deliberadamente sobredimensionado que recorre el fotograma como un protagonista visible: entra desde fuera de la pantalla, lleva la mirada del espectador al siguiente punto de interés, hace clic para provocar lo que ocurre a continuación y se marcha. Probado en producción en múltiples películas de lanzamiento.
Por qué existe. El movimiento de un cursor grande es una de las fuentes de movimiento más baratas y de alto rendimiento en un vídeo de lanzamiento: un solo elemento, animaciones solo de transformación, y (1) lleva la mirada a través de la pantalla en escenas que de otro modo se leerían como muertas, (2) proporciona ignición causal a morphs/transiciones ("el clic hizo eso"), y (3) segmenta la mirada fuera de un estado estático al iniciar una nueva escena o una secuencia de animación compleja. Más grande es mejor: un cursor de tamaño real desaparece a escala de vídeo.
Tamaño y apariencia (convención de la casa)
- Escenas a pantalla completa:
7cqw(≈134px a 1920). En variantes dentro de maqueta / pantalla pequeña:4.6–5.5cqw. Nunca más pequeño. - Una geometría de flecha SVG en todas partes. Dos rellenos probados: cuerpo blanco + trazo negro, o cuerpo negro (
#1c1c1c) + trazo blanco (1.4px). Elige según el contraste de la escena, mantenlo constante por película. - Cursores con motivo de marca (la jugada maestra). La flecha macOS es el VALOR POR DEFECTO, no una imposición. Cuando la marca del tema tiene una identidad de cursor reconocible (una flecha multijugador de una herramienta de diseño colaborativo con una etiqueta de nombre al estilo Figma, una mira de precisión de una suite creativa, un puntero de producto distintivo), usa ESE cursor: lenguaje de marca instantáneamente legible para cualquiera que conozca el producto. Las mismas reglas se aplican sin cambios (escala sobredimensionada, entrada/salida física, apuntado de punta, ignición por clic), y una variante con etiqueta de nombre viaja como una unidad rígida (la etiqueta sigue a la flecha). Recurre a él solo cuando el motivo sea genuinamente referenciable; un cursor que nadie reconoce es solo una flecha rara: vuelve al macOS.
filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)),pointer-events: none,z-indexpor encima de todo el contenido de la escena,will-change: transform.
#root .cursor {
position: absolute;
left: 48%;
top: 115%; /* fuera de pantalla abajo — la pose de reposo ESTÁ fuera de pantalla */
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;
}
Ley de entrada — física, nunca revelada
El cursor siempre entra desde fuera de la pantalla (canónico: desde abajo, top:115–120%) y viaja a su primer objetivo en un deslizamiento decelerante. Debe sentirse como que entró en la habitación. Nunca lo fundas por opacidad en una posición de reposo, nunca lo reveles con una máscara: eso se lee como un fallo (un modo de fallo real, observado repetidamente).
- Trayectoria por defecto: recta hacia arriba en el eje y hasta el objetivo — sin diagonales fragmentadas. Una diagonal está bien cuando ES la historia (entrando hacia un objetivo fuera del eje), pero es un vector continuo de cualquier manera.
duration: 0.4–0.92s,ease: power3.out,immediateRender: falseen el fromTo.
tl.fromTo(
cursor,
{ left: "48.6%", top: "115%" },
{ left: "48.6%", top: "55%", duration: 0.85, ease: "power3.out", immediateRender: false },
0.25,
);
Apuntado de punta y el toque de clic
El punto caliente es la PUNTA de la flecha, no el centro de la caja. Aterriza la punta en el centro del objetivo, y pivota toda la escala de presión en la punta: transformOrigin: '21% 14%' (para la ruta de la flecha de la casa en un viewBox de 24 unidades).
Clic = compresión/expansión asimétrica (relación 1:2 se lee como un toque real):
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,
);
La reacción del objetivo es una animación separada y paralela (botón: scale: 0.94 + color/sombra de presión, comenzando en el mismo t). Los toques solo del cursor (por ejemplo, enfocar un campo de texto) NO obtienen reacción del objetivo. Combínalo con cursor-click-ripple / press-release-spring para el lado del objetivo.
El clic ENCIENDE el siguiente ritmo
Nunca permitas que un morph, una secuencia de escritura, una transformación de ventana o una animación que define la escena simplemente comience. Coloca el cursor sobre el activador y deja que el clic lo provoque, en el mismo fotograma:
- clic ▸ cascada de menú/submenú, volteo de alternancia
- clic ▸ inicio de escritura en un campo de entrada
- clic ▸ morph de compositor / reducción de ventana
- clic ▸ ignición de logotipo / lanzamiento de vuelo
- clic ▸ cambio de estado de reproducción + despertar de vida de interfaz en una maqueta de producto
Durante los ritmos largos que no posee (escritura, narración), el cursor se desplaza a un lado (0.5–0.9s, power2.out) — nunca se queda congelado sobre la acción, nunca se tambalea sin propósito.
Ley de salida y transferencia entre escenas
Dos salidas autorizadas — ambas físicas, nunca un fundido de opacidad en su lugar:
- Salir del fotograma: acelera hacia el borde más cercano con
power2.in(left:'118%',left:'-12%', otop:'116%'), 0.5–0.7s. - Transferencia cortando la curva: en los últimos ~0.3s antes de un corte brusco, el cursor comienza a acelerar (
power2.in) hacia el PRIMER punto de clic de la SIGUIENTE escena, cubriendo el primer ~1/3 de esa trayectoria; la siguiente composicióngsap.setcoloca el cursor en la pose de transferencia y continúa conpower2.outa velocidad coincidente. El cursor mismo se convierte en el elemento portador que cose la costura:
// escena A, últimos 0.3s — inicia el viaje:
tl.to(cursor, { left: "40.7%", top: "63.7%", duration: 0.3, ease: "power2.in" }, CUT - 0.3);
// escena B, t=0 — termínalo a velocidad coincidente:
gsap.set(cursorB, { left: "40.7%", top: "63.7%" });
tl.to(cursorB, { left: "22%", top: "45%", duration: 0.6, ease: "power2.out" }, 0);
Lista de verificación
- ≥ 7cqw a pantalla completa (4.6–5.5cqw dentro de una maqueta) — cuando tengas dudas, más grande
- entra desde fuera de la pantalla en un vector continuo (sin fundido/revelado por máscara)
- la punta aterriza en el centro del objetivo; la presión pivota en
transformOrigin: '21% 14%' - cada clic provoca algo, en el mismo fotograma
- se desplaza a un lado durante los ritmos que no posee; cero tambaleo sin propósito
- sale físicamente (fuera del fotograma o transferencia cortando la curva) — sin fundido en su lugar