Cursor Superdimensionado — o condutor do olhar
Um ponteiro deliberadamente grande no estilo macOS que percorre o quadro como um protagonista visível: entra de fora da tela, guia o olhar do espectador para 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. O movimento de um cursor grande é uma das fontes de movimento mais baratas e de alto rendimento 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, seriam consideradas mortas, (2) fornece ignição causal para morphs/transições ("o clique fez isso"), e (3) segmenta o olhar de um estado obsoleto ao iniciar uma nova cena ou uma sequência de animação complexa. Maior é melhor — um cursor de tamanho real desaparece na escala do vídeo.
Tamanho e aparência (convenção da casa)
- Cenas em tela cheia:
7cqw(≈134px em 1920). Variantes em maquete / quadro pequeno: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 conforme o contraste da cena, mantenha constante por filme. - Cursores com tema da marca (a jogada poderosa). A seta macOS é o PADRÃO, não uma obrigação. Quando a marca do assunto tiver uma identidade de cursor reconhecível — uma seta multiplayer colorida de uma ferramenta de design colaborativo com uma etiqueta de nome (estilo Figma), uma mira de precisão de um conjunto criativo, um ponteiro de produto distinto — use ESSE cursor: linguagem de marca instantaneamente legível para qualquer um que conheça o produto. As mesmas leis se aplicam inalteradas (escala superdimensionada, entrada/saída física, mira na ponta, clique que dispara), e uma variante com etiqueta de nome viaja como uma unidade rígida (a etiqueta segue a seta). Recorra a ele 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 único deslize desacelerado. Deve parecer que entrou na sala. Nunca o revele com fade de opacidade em uma posição de repouso, nunca o revele com máscara — isso parece uma falha (um modo de falha real, observado repetidamente).
- Caminho padrão: para cima 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,
);
Mira na ponta e clique
O ponto ativo é a PONTA da seta, não o centro da caixa. Posicione a ponta no centro do alvo e pivote toda a escala de pressão na ponta: transformOrigin: '21% 14%' (para o caminho da seta da casa em uma 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 um campo de texto) NÃO recebem reação do alvo. Combine com cursor-click-ripple / press-release-spring para o lado do alvo.
O clique DISPARA o próximo movimento
Nunca deixe um morph, sequência de digitação, transformação de janela ou animação definidora de cena simplesmente começar. 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 um campo
- clique ▸ morph de compositor / encolhimento de janela
- clique ▸ ignição de logotipo / lançamento de voo
- clique ▸ alternância de estado de reprodução + despertar de UI em uma maquete de produto
Durante movimentos longos que não são de sua responsabilidade (digitação, narração), o cursor se desvia para o lado (0.5–0.9s, power2.out) — nunca fica congelado em cima da ação, nunca balança ocioso.
Lei de saída e transição entre cenas
Duas saídas autorizadas — ambas físicas, nunca um fade 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. - Transição de corte de curva: nos últimos ~0.3s 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 transição e continua compower2.outem velocidade combinada. O próprio cursor se torna o elemento portador que costura a costura:
// cena A, últimos 0.3s — iniciar a jornada:
tl.to(cursor, { left: "40.7%", top: "63.7%", duration: 0.3, ease: "power2.in" }, CORTE - 0.3);
// cena B, t=0 — finalizá-la 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 uma maquete) — quando em dúvida, maior
- entra de fora da tela em um vetor contínuo (sem revelação por fade/máscara)
- a ponta pousa no centro do alvo; a pressão pivota em
transformOrigin: '21% 14%' - todo clique causa algo, no mesmo quadro
- desvia para o lado durante movimentos que não são de sua responsabilidade; zero balanço ocioso
- sai fisicamente (fora do quadro ou transição de corte de curva) — sem fade no lugar