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 du cadre, promène l'œil du spectateur jusqu'au point d'intérêt suivant, clique pour provoquer la prochaine action, puis sort. Éprouvé en production sur plusieurs films de lancement.
Pourquoi ça existe. Le grand mouvement de 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 type transform-only, et il (1) amène l'œil à travers l'écran sur des scènes qui autrement seraient perçues comme 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 c'est mieux — un curseur de taille réelle disparaît à l'échelle vidéo.
Taille et apparence (convention maison)
- Scènes plein écran :
7cqw(≈134px à 1920). En variantes dans une 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,4px). Choisir selon le contraste de la scène, le garder constant pour un film donné. - Curseurs thématiques de marque (le geste puissant). La flèche macOS est la VALEUR PAR DÉFAUT, pas une obligation. Lorsque la marque sujet possède une identité de curseur reconnaissable — la flèche multicolore collaborative d'un outil de design avec une étiquette de nom (style Figma), le réticule de précision d'une suite créative, un pointeur de produit distinctif — utilisez CE curseur à la place : langage de marque instantanément lisible pour quiconque connaît le produit. Les mêmes lois s'appliquent sans changement (échelle surdimensionnée, entrée/sortie physique, ciblage de la pointe, ignition par clic), et une variante avec étiquette de nom se déplace comme une unité rigide (l'étiquette 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 par 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é
Le curseur entre toujours depuis l'extérieur du cadre (canoniquement : depuis le bas, top:115–120%) et se rend à 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'apparaissez jamais avec un fondu d'opacité à une position fixe, ne le révélez jamais par un masque — cela est perçu comme un défaut (un mode d'échec observé à plusieurs reprises).
- Trajet par défaut : tout droit sur l'axe y vers la cible — pas de diagonales fragmentées. Une diagonale est acceptable lorsqu'elle FAIT partie de l'histoire (entrée vers une cible hors axe), mais il s'agit dans les deux cas d'un vecteur continu.
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 et le tap clic
Le point chaud est la POINTE de la flèche, pas le centre de la boîte. Faites atterrir la pointe sur le centre de la cible, et faites pivoter toute la mise à l'échelle de la pression sur la pointe : transformOrigin: '21% 14%' (pour le tracé de flèche maison dans un viewBox de 24 unités).
Clic = compression/expansion asymétrique (un ratio 1:2 donne l'impression d'un tap réel) :
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 distincte et parallèle (bouton : scale: 0,94 + couleur/ombre de pression, commençant au même t). Les taps uniquement sur le curseur (par exemple pour focaliser un champ de 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 prochain temps
Ne laissez jamais une morphose, une séquence de frappe, une transformation de fenêtre ou une animation définissant une scène commencer simplement. Placez le curseur sur le déclencheur et laissez le clic le provoquer, dans la même image :
- clic ▸ cascade de menu/sous-menu, bascule flip
- clic ▸ déclenchement de frappe dans un champ de saisie
- clic ▸ morphose du compositeur / rétrécissement de fenêtre
- clic ▸ ignition du logo / lancement de vol
- clic ▸ bascule de lecture + réveil de l'interface utilisateur dans une maquette de produit
Pendant les longues séquences qu'il ne possède pas (frappe, narration), le curseur dérive sur le côté (0,5–0,9s, power2.out) — ne reste jamais figé au-dessus de l'action, ne vacille jamais inutilement.
Loi de sortie et transfert entre scènes
Deux sorties autorisées — les deux physiques, jamais un fondu d'opacité sur place :
- Quitter le cadre : accélérer vers le bord le plus proche avec
power2.in(left:'118%',left:'-12%', outop:'116%'), 0,5–0,7s. - Transfert par courbe coupée : dans les ~0,3s finales avant un cut franc, 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 trajet ; la composition suivantegsap.setle curseur à la pose de transfert et continue avecpower2.outà vitesse adaptée. Le curseur lui-même devient l'élément porteur qui coud la jointure :
// scène A, dernière 0,3s — commence 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 — termine-le à 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 plein écran (4,6–5,5cqw dans une maquette) — en cas de doute, plus grand
- entre depuis l'extérieur du cadre sur un seul 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
- dérive sur le côté pendant les séquences qu'il ne possède pas ; zéro vacillement inutile
- sort physiquement (hors cadre ou transfert par courbe coupée) — pas de fondu sur place