Curseur surdimensionné — le porteur d'œil
Un pointeur macOS délibérément surdimensionné qui parcourt le cadre comme un protagoniste visible : il entre depuis l'extérieur de l'écran, guide l'œil du spectateur vers le point d'intérêt suivant, clique pour provoquer la chose suivante, puis sort. Éprouvé en production sur plusieurs films de lancement.
Pourquoi ça existe. Le mouvement d'un grand curseur est l'une des sources de mouvement les moins coûteuses et les plus efficaces dans une vidéo de lancement : un seul élément, des interpolations de transformation uniquement, et il (1) attire l'œil à travers l'écran sur des scènes qui paraîtraient autrement mortes, (2) donne une ignition causale aux morphoses/transitions ("c'est le clic qui a fait ça"), et (3) sort l'œil d'un état figé lors du lancement d'une nouvelle scène ou d'une séquence d'animation complexe. Plus grand est meilleur — un curseur de taille réelle disparaît à l'échelle vidéo.
Taille & aspect (convention de la maison)
- Scènes pleine image :
7cqw(≈134px à 1920). Variantes dans maquette / petit cadre :4.6–5.5cqw. Jamais plus petit. - Une seule géométrie de flèche SVG partout. Deux remplissages éprouvés — corps blanc + contour noir, ou corps noir (
#1c1c1c) + contour blanc (1.4 px). Choisir selon le contraste de la scène, rester constant par film. - Curseurs à motif de marque (le coup de maître). La flèche macOS est la valeur PAR DÉFAUT, pas une obligation. Lorsque la marque du sujet a une identité de curseur reconnaissable — une flèche multijoueur colorée avec un badge de nom pour un outil de design collaboratif (style Figma), un réticule de précision pour une suite créative, un pointeur de produit distinctif — utilisez CE curseur à la place : un langage de marque instantanément lisible pour quiconque connaît le produit. Les mêmes lois s'appliquent inchangées (échelle surdimensionnée, entrée/sortie physique, ciblage de la pointe, ignition par clic), et une variante avec badge de nom se déplace comme une seule unité rigide (le badge suivant la flèche). N'y recourez que lorsque le motif est véritablement référençable ; un curseur que personne ne reconnaît n'est qu'une flèche étrange — revenez au défaut macOS.
filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)),pointer-events: none,z-indexau-dessus de tout contenu de scène,will-change: transform.
#root .cursor {
position: absolute;
left: 48%;
top: 115%; /* hors écran en bas — la pose de repos EST hors écran */
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;
}
Loi d'entrée — physique, jamais révélée
Le curseur entre toujours depuis l'extérieur de l'écran (canonique : par le bas, top:115–120%) et se déplace vers sa première cible en un seul mouvement décéléré. Il doit donner l'impression d'être entré dans la pièce. Ne l'opacifiez jamais par fondu à une position de repos, ne le révélez jamais par masque — cela ressemble à un bug (un mode de défaillance réel et observé à plusieurs reprises).
- Chemin par défaut : directement sur l'axe y vers la cible — pas de diagonales fragmentées. Une diagonale est acceptable lorsqu'elle FAIT l'histoire (entrée vers une cible hors axe), mais c'est un vecteur continu dans les deux cas.
duration: 0.4–0.92s,ease: power3.out,immediateRender: falsesur le fromTo.
tl.fromTo(
cursor,
{ left: "48.6%", top: "115%" },
{ left: "48.6%", top: "55%", duration: 0.85, ease: "power3.out", immediateRender: false },
0.25,
);
Ciblage de la pointe & le tap du clic
Le point chaud est la POINTE de la flèche, pas le centre de la boîte. Posez la pointe sur le centre de la cible, et pivotez toute mise à l'échelle de la pression sur la pointe : transformOrigin: '21% 14%' (pour le chemin de la flèche maison dans un viewBox de 24 unités).
Clic = compression/expansion asymétrique (rapport 1:2 donne l'impression d'un vrai tap) :
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 réaction de la cible est une interpolation parallèle distincte (bouton : scale: 0.94 + couleur/ombre de pression, démarrant au même t). Les simples tap du curseur (ex. pour focaliser une saisie texte) n'obtiennent AUCUNE réaction de la cible. Associer avec cursor-click-ripple / press-release-spring pour le côté cible.
Le clic DÉCLENCHE le temps suivant
Ne laissez jamais une morphose, une séquence de saisie, une transformation de fenêtre ou une animation définissant une scène simplement démarrer. Placez le curseur sur le déclencheur et laissez le clic le provoquer, dans la même image :
- clic ▸ cascade menu/sous-menu, bascule flip
- clic ▸ lancement de saisie dans un champ
- clic ▸ morphose du compositeur vers le bas / rétrécissement de fenêtre
- clic ▸ ignition du logo / lancement de vol
- clic ▸ bascule de l'état de lecture + réveil de l'interface dans une maquette de produit
Pendant les longs temps qu'il ne possède pas (saisie, narration), le curseur se déplace sur le côté (0.5–0.9s, power2.out) — jamais figé sur l'action, jamais à osciller inutilement.
Loi de sortie & passage entre scènes
Deux sorties autorisées — toutes deux physiques, jamais un fondu sur place :
- Quitter le cadre : accélérer hors du bord le plus proche avec
power2.in(left:'118%',left:'-12%', outop:'116%'), 0.5–0.7s. - Passage par courbe coupée : dans les ~0.3s finales avant une coupe franche, le curseur commence à accélérer (
power2.in) vers le premier point de clic de la scène SUIVANTE, couvrant le premier ~1/3 de ce chemin ; la composition suivantegsap.setle curseur à la pose de passage et continue avecpower2.outà vitesse adaptée. Le curseur lui-même devient l'élément porteur qui relie la couture :
// scène A, dernières 0.3s — commencer le voyage :
tl.to(cursor, { left: "40.7%", top: "63.7%", duration: 0.3, ease: "power2.in" }, CUT - 0.3);
// scène B, t=0 — le terminer à vitesse adaptée :
gsap.set(cursorB, { left: "40.7%", top: "63.7%" });
tl.to(cursorB, { left: "22%", top: "45%", duration: 0.6, ease: "power2.out" }, 0);
Liste de vérification
- ≥ 7cqw en pleine image (4.6–5.5cqw dans une maquette) — en cas de doute, plus grand
- entre depuis l'extérieur de l'écran sur un vecteur continu (pas de fondu/révélation par masque)
- la pointe atterrit au centre de la cible ; la pression pivote sur
transformOrigin: '21% 14%' - chaque clic provoque quelque chose, dans la même image
- se déplace sur le côté pendant les temps qu'il ne possède pas ; zéro oscillation inutile
- sort physiquement (hors cadre ou passage par courbe coupée) — pas de fondu sur place