● Lab 08 — Combos Premium
Magnetic, Cursor,
Tilt & Marquee
Padrões Awwwards construídos com GSAP puro. Cursor customizado ativo nesta página — observe o ponto vermelho.
Parâmetros disponíveis
| Tag | Tipo | Descrição | Exemplo |
|---|---|---|---|
| sm-cursor | string / presença | Modo: "dot", "ring", "image" (auto-cria) ou presença (elemento é o cursor) | "dot" |
| sm-cursor-lerp | número (s) | Atraso de seguimento — maior = mais lento | "0.1" |
| sm-cursor-size | número (px) | Tamanho do cursor em dot/ring/image | "20" |
| sm-cursor-color | cor CSS | Cor do dot ou da borda do ring | "var(--blue)" |
| sm-cursor-src | URL | Caminho da imagem para modo "image" | "cursor.svg" |
| sm-cursor-mix | string CSS | mix-blend-mode do cursor (ex: "difference") | "difference" |
| sm-cursor-hide-native | presença | Oculta o cursor nativo em toda a página | — |
| sm-cursor-hover | número (scale) | Scale do cursor ao hover neste elemento | "2" |
| sm-magnetic | presença | Campo magnético ao redor do cursor | — |
| sm-magnetic-strength | 0–1 | Intensidade da atração magnética | "0.4" |
| sm-hover-tilt | presença | Inclinação 3D baseada na posição do mouse | — |
| sm-tilt-strength | número (graus) | Intensidade máxima da inclinação | "20" |
| sm-marquee | presença | Ticker infinito — o primeiro filho se duplica | — |
| sm-marquee-speed | número (px/s) | Velocidade do ticker | "80" |
| sm-marquee-direction | string | "left" (padrão) ou "right" | "right" |
sm-cursor — Cursor Personalizado
Coloque sm-cursor no <body>. Um ponto branco com mix-blend-mode:difference passa a seguir o mouse com lerp suave. Hover automático em a, button e [sm-magnetic].
Uso básico — só no body
<body sm-cursor>
🖼️
Cursor substituído por imagem
Cursor imagem
<body sm-cursor
sm-cursor-img="cursor.png">
sm-cursor-img="cursor.png">
sm-magnetic — Campo Magnético
Aproxime o cursor dos botões abaixo. Eles são atraídos pelo mouse e voltam com física elástica.
Botão magnético — strength 0.4
sm-magnetic
sm-magnetic-strength="0.4"
sm-magnetic-strength="0.4"
Comparação de intensidades
sm-magnetic sm-magnetic-strength="0.6"
sm-magnetic sm-magnetic-strength="0.2"
sm-magnetic sm-magnetic-strength="0.2"
Botões circulares magnéticos
sm-magnetic
sm-magnetic-strength="0.5"
sm-magnetic-strength="0.5"
sm-hover-tilt — Inclinação 3D
Mova o mouse sobre os cards. O ângulo do hover controla rotationX e rotationY.
🎴
Strength: 18
Card tilt — strength 18
sm-hover-tilt
sm-tilt-strength="18"
sm-tilt-strength="18"
◈
Strength: 25
Card tilt — inclinação forte
sm-hover-tilt
sm-tilt-strength="25"
sm-tilt-strength="25"
🃏
Suave (10)
🎲
Extremo (30)
Comparação de intensidade
sm-hover-tilt sm-tilt-strength="10"
sm-hover-tilt sm-tilt-strength="30"
sm-hover-tilt sm-tilt-strength="30"
sm-marquee — Ticker Infinito
O conteúdo do primeiro filho é duplicado automaticamente para criar o loop sem costura.
SMOOLL ENGINE
GSAP POWERED
ZERO JAVASCRIPT
DECLARATIVE
PREMIUM MOTION
AWWWARDS READY
Smooth transitions
Native performance
ScrollTrigger ready
SPA Router built-in
Zero dependencies
GSAP
SMOOLL
HTML
CSS
VANILLA JS
NATIVE
ZERO NPM
SCROLLTRIGGER
Todos esses efeitos — cursor, magnético, tilt e marquee — foram feitos com GSAP puro, sem plugins premium.