Premium — Mouse
Magnetismo, tilt 3D, marquee e cursor customizado — GSAP puro, sem plugins
premium. Equivalente ao Lab 08 (demo-premium.html) do Smooll original.
Achado ao portar: a documentação original do Smooll anuncia
sm-cursor-lerp, -size, -color, -mix,
-hide-native e -hover (escala por elemento) — mas o código-fonte real de
smoollSetupCursor só implementava o cursor como um ponto branco fixo de 10px→36px no
hover, com mix-blend-mode:difference e lerp 0.16 hardcoded. Adicionamos de volta
-size, -ease, -delay e um modo -mode="follow"
(cursor nativo continua visível, a imagem só acompanha do lado) no sw-premium-cursor
do SW — inclusive suporte a "atraso elástico" via qualquer ease do GSAP.
Parâmetros disponíveis (reais, conferidos no código-fonte)
| Atributo | Tipo | Descrição |
|---|---|---|
sw-premium-cursor |
presença | Ativa o cursor customizado (ponto, segue com ease) |
sw-premium-cursor-img |
URL (svg/png) | Troca o ponto por uma imagem |
sw-premium-cursor-mode |
"replace" / "follow" | replace (padrão) some o cursor nativo; follow mantém o cursor normal e só faz a imagem acompanhar do lado |
sw-premium-cursor-size |
número (px) | Tamanho do ponto/imagem (padrão: 36) |
sw-premium-cursor-ease |
ease do GSAP | Curva do arrasto — "elastic.out(1, 0.3)" pra atraso com mola/bounce |
sw-premium-cursor-delay |
número (s) | Duração do arrasto até alcançar o mouse (padrão: 0.5) |
sw-premium-magnetic / -magnetic-strength |
presença / 0–1 | Campo magnético ao redor do cursor |
sw-premium-hover-tilt / -tilt-strength |
presença / graus | Inclinação 3D baseada na posição do mouse |
sw-premium-marquee / -marquee-speed /
-marquee-direction |
presença / número / "left"·"right" | Ticker infinito — o primeiro filho se duplica automaticamente |
1. sw-premium-magnetic — campo magnético
Aproxime o cursor dos botões. Eles são atraídos e voltam com física elástica.
2. sw-premium-hover-tilt — inclinação 3D
Mova o mouse sobre os cards. O ângulo do hover controla rotationX/Y.
3. sw-premium-marquee — ticker infinito
O conteúdo do primeiro filho é duplicado automaticamente pra criar o loop sem costura.
4. sw-premium-cursor — cursor customizado
Coloque no <body> ou em qualquer container. Um ponto
branco com mix-blend-mode:difference segue o mouse — cresce ao passar sobre
a, button ou [sw-premium-magnetic]. Só ativo em ponteiro
fino (pointer:fine) — ignorado em touch. Esta página inteira já está com o cursor
padrão ativo (o ponto branco que te segue agora).
5. Imagem seguindo com atraso elástico
Troque o ponto por um SVG/PNG com -cursor-img, e o ritmo do
arrasto por qualquer ease do GSAP com -cursor-ease — "elastic.out(1, 0.3)"
dá aquele efeito de mola/bounce ao alcançar o mouse. Use -cursor-mode="follow" se
quiser manter o cursor nativo visível e só adicionar a imagem seguindo do lado (ex.: um mascote,
logo ou selo — em vez de substituir a seta por completo).
Mova o mouse dentro de cada área abaixo pra sentir a diferença de ritmo (demo isolada nesta caixa — não é o cursor global da página, que continua um ponto simples):