Cursor Superdimensionado — o condutor do olhar
Um ponteiro macOS deliberadamente superdimensionado que percorre o quadro como um protagonista visível: entra de fora da tela, guia o olhar do espectador até o próximo ponto de interesse, clica para causar a próxima coisa que acontece e sai. Comprovado em produção em vários filmes de lançamento.
Por que existe. Movimento de cursor grande é uma das fontes de movimento de alto rendimento mais baratas em um vídeo de lançamento: um elemento, apenas tweens de transformação, e ele (1) traz o olhar através da tela em cenas que, de outra forma, pareceriam mortas, (2) dá uma ignição causal para morphs/transições ("foi o clique que fez isso"), e (3) segmenta o olhar para fora de um estado inerte ao iniciar uma nova cena ou uma sequência de animação complexa. Quanto maior, melhor — um cursor de tamanho real desaparece na escala do vídeo.
Tamanho e aparência (convenção da casa)
- Cenas de tela cheia:
7cqw(≈134px em 1920). Em variantes em mock / tela pequena:4.6–5.5cqw. Nunca menor. - Uma única geometria de seta SVG em todos os lugares. Dois preenchimentos comprovados — corpo branco + traço preto, ou corpo preto (
#1c1c1c) + traço branco (1.4px). Escolha por contraste da cena, mantenha constante por filme. - Cursores com motivo da marca (a jogada poderosa). A seta macOS é o PADRÃO, não uma obrigação. Quando a marca do assunto tem uma identidade de cursor reconhecível — uma seta colorida de multiplayer de ferramenta de design colaborativo com uma etiqueta de nome (estilo Figma), uma mira de precisão de suíte criativa, um ponteiro de produto distinto — use ESSE cursor: linguagem de marca instantaneamente legível para quem conhece o produto. As mesmas leis se aplicam inalteradas (escala superdimensionada, entrada/saída física, direcionamento da ponta, ignição por clique), e uma variante com etiqueta de nome viaja como uma unidade rígida (etiqueta seguindo a seta). Use-a apenas quando o motivo for genuinamente referenciável; um cursor que ninguém reconhece é apenas uma seta estranha — volte ao padrão macOS.
filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)),pointer-events: none,z-indexacima de todo o conteúdo da cena,will-change: transform.
#root .cursor {
position: absolute;
left: 48%;
top: 115%; /* fora da tela abaixo — a pose de repouso está FORA da tela */
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;
}
Lei de entrada — física, nunca revelada
O cursor sempre entra de fora da tela (canônico: de baixo, top:115–120%) e viaja até seu primeiro alvo em um deslize desacelerado. Deve dar a sensação de que entrou na sala. Nunca desapareça em opacidade em uma posição de repouso, nunca revele por máscara — isso parece um glitch (um modo de falha real e repetidamente observado).
- Caminho padrão: diretamente no eixo y até o alvo — sem diagonais fragmentadas. Uma diagonal é aceitável quando ELA é a história (entrando em direção a um alvo fora do eixo), mas é um vetor contínuo de qualquer maneira.
duration: 0.4–0.92s,ease: power3.out,immediateRender: falseno fromTo.
tl.fromTo(
cursor,
{ left: "48.6%", top: "115%" },
{ left: "48.6%", top: "55%", duration: 0.85, ease: "power3.out", immediateRender: false },
0.25,
);
Direcionamento da ponta e o toque do clique
O ponto ativo é a PONTA da seta, não o centro da caixa. Posicione a ponta no centro do alvo e centralize toda a escala de pressão na ponta: transformOrigin: '21% 14%' (para o caminho da seta padrão em um viewBox de 24 unidades).
Clique = compressão/expansão assimétrica (proporção 1:2 parece um 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,
);
A reação do alvo é um tween separado e paralelo (botão: scale: 0.94 + cor/sombra de pressão, começando no mesmo t). Toques apenas no cursor (por exemplo, focar uma entrada de texto) NÃO recebem reação do alvo. Emparelhe com cursor-click-ripple / press-release-spring para o lado do alvo.
O clique ACIONA o próximo compasso
Nunca deixe que uma morph, execução de digitação, transformação de janela ou animação de definição de cena simplesmente comece. Estacione o cursor no gatilho e deixe o clique causá-lo, no mesmo quadro:
- clique ▸ cascata de menu/submenu, alternância de flip
- clique ▸ início de digitação em uma entrada
- clique ▸ morph de compositor down / encolhimento de janela
- clique ▸ ignição de logotipo / lançamento de voo
- clique ▸ alternância de estado de reprodução + despertar de vida de UI em um mock de produto
Durante compassos longos que não possui (digitação, narração), o cursor desvia para o lado (0.5–0.9s, power2.out) — nunca fica congelado sobre a ação, nunca oscila ociosamente.
Lei de saída e transferência entre cenas
Duas saídas sancionadas — ambas físicas, nunca um desvanecimento de opacidade no lugar:
- Sair do quadro: acelere para fora da borda mais próxima com
power2.in(left:'118%',left:'-12%', outop:'116%'), 0.5–0.7s. - Transferência corte-a-curva: nos ~0.3s finais antes de um corte brusco, o cursor começa a acelerar (
power2.in) em direção ao PRIMEIRO ponto de clique da PRÓXIMA cena, cobrindo o primeiro ~1/3 desse caminho; a próxima composiçãogsap.seto cursor na pose de transferência e continua compower2.outem velocidade combinada. O próprio cursor se torna o elemento condutor que costura a emenda:
// cena A, últimos 0.3s — inicia a jornada:
tl.to(cursor, { left: "40.7%", top: "63.7%", duration: 0.3, ease: "power2.in" }, CUT - 0.3);
// cena B, t=0 — finaliza em velocidade combinada:
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 verificação
- ≥ 7cqw em tela cheia (4.6–5.5cqw dentro de um mock) — quando em dúvida, maior
- entra de fora da tela em um vetor contínuo (sem desvanecimento/revelação por máscara)
- a ponta pousa no centro do alvo; a pressão centraliza em
transformOrigin: '21% 14%' - cada clique causa algo, no mesmo quadro
- desvia para o lado durante compassos que não possui; zero oscilação ociosa
- sai fisicamente (para fora do quadro ou transferência corte-a-curva) — sem desvanecimento no lugar