# Vatse Motion > Biblioteca de animação para a web feita para programadores e para IAs: motor de tween/timeline (no nível do GSAP), rolagem cinematográfica (cenas fixas, scrub, trilho horizontal, sequência de imagens), efeitos de texto, interação com o cursor e 222 presets declarativos por atributo HTML (data-vm). Sem dependências. Respeita prefers-reduced-motion e nunca esconde conteúdo se algo falhar. ## Regras para gerar código com Vatse Motion - Prefira os presets declarativos: ``. Só use a API JS quando o efeito não existir como preset. - Inglês é a forma principal; português é aceito em nomes de preset, de parâmetro e em valores (ex.: data-vm="cena-fixa" = "pin-scene", data-vm-por="palavras" = data-vm-by="words"). Prefira o inglês em código que outras pessoas vão ler. - Parâmetros são atributos `data-vm-`. Tempos em segundos (0.6) ou ms (600ms). Medidas em px por padrão. - Pacotes: núcleo `vatse-motion.min.js` (entradas, texto, rolagem, experiências) + módulos opcionais `vatse-motion.components.min.js` (componentes animados) e `vatse-motion.backgrounds.min.js` (fundos WebGL), carregados DEPOIS do núcleo; ou tudo em `vatse-motion.full.min.js`. O campo `bundle` de cada preset no manifest diz qual arquivo ele exige; o verificador acusa quando falta. - Inclua o script com defer: e o CSS: . - Templates completos (Estúdio, Produto, Portfólio, Restaurante, Clínica, Academia, SaaS, Evento, Imobiliária, Ônix) em `templates/`: partir de um deles é o caminho mais rápido para uma página profissional. Para rolagem suave, coloque `data-vm-smooth` no . - Depois de gerar o HTML, rode `npx vatse-motion check `: ele aponta nomes errados e sugere a correção. - Catálogo completo e tipado: dist/manifest.json. Tipos: dist/vatse-motion.d.ts. - Não anime a página toda: 1 efeito por bloco, cenas fixas (pin-scene, horizontal, sequence) com moderação. ## API JS (essencial) ```js import { animate, from, fromTo, set, timeline, scene, split, smoothScroll, start } from '@vatse/motion'; animate('.caixa', { x: 200, rotate: 45, opacity: 1, duration: 0.8, ease: 'expo.out' }); from('.card', { y: 40, opacity: 0, stagger: { each: 0.08, from: 'center' } }); const tl = timeline({ defaults: { duration: 0.6, ease: 'power3.out' } }) .from('.titulo', { y: 60, opacity: 0 }) .from('.sub', { y: 20, opacity: 0 }, '<0.15') // começa 0,15 s depois do anterior .to('.foto', { clipPath: 'inset(0% 0% 0% 0%)' }, '-=0.3'); scene({ trigger: '.capitulo', start: 'top top', end: '+=200%', pin: true, scrub: 0.5, animation: tl }); const s = split('h1', { type: 'lines,words', mask: 'lines' }); from(s.lines, { y: '110%', stagger: 0.06 }); smoothScroll(); start(); ``` Posições na timeline: número absoluto, "<" (junto do anterior), ">" (depois do anterior), "+=0.2", "-=0.2", "<0.1", "rotulo", "rotulo+=0.3". Propriedades: x, y, z, xPercent, yPercent, scale, scaleX, scaleY, rotate, rotateX, rotateY, skewX, skewY, opacity, qualquer CSS (clipPath, filter, backgroundColor...), variáveis --css, atributos "attr:d". Valores relativos "+=50". Quadros-chave: x: [0, 120, 80]. [de, para]: opacity: [0, 1]. Curvas: linear, power1.in, power1.out, power1.inOut, power2.in, power2.out, power2.inOut, power3.in, power3.out, power3.inOut, power4.in, power4.out, power4.inOut, sine.in, sine.out, sine.inOut, expo.in, expo.out, expo.inOut, circ.in, circ.out, circ.inOut, back.in, back.out, back.inOut, elastic.in, elastic.out, elastic.inOut, bounce.in, bounce.out, bounce.inOut, quad.in, quad.out, quad.inOut, cubic.in, cubic.out, cubic.inOut, quart.in, quart.out, quart.inOut, quint.in, quint.out, quint.inOut, suave, smooth, entrada, enter, saida, exit, cinema, cinematic, elastico, pulo, snappy, firme, none, cubic(x1,y1,x2,y2), steps(n), spring(massa,rigidez,amortecimento). ## Entradas (ao aparecer na tela) - `data-vm="fade"` (apelidos: aparecer, fade-in): Aparece suavemente (só opacidade). Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"). Exemplo: `

Texto

` - `data-vm="fade-up"` (apelidos: subir, fadeUp): Aparece deslizando de baixo para cima. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-distance` (length, padrão 32). Exemplo: `
Cartão
` - `data-vm="fade-down"` (apelidos: descer, fadeDown): Aparece deslizando de cima para baixo. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-distance` (length, padrão 32). Exemplo: `
Cartão
` - `data-vm="fade-left"` (apelidos: da-direita, fadeLeft): Aparece deslizando da direita para a esquerda. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-distance` (length, padrão 32). Exemplo: `
Cartão
` - `data-vm="fade-right"` (apelidos: da-esquerda, fadeRight): Aparece deslizando da esquerda para a direita. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-distance` (length, padrão 32). Exemplo: `
Cartão
` - `data-vm="zoom-in"` (apelidos: ampliar, zoomIn, scale-in): Aparece crescendo de um tamanho menor. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-scale` (number, padrão 0.94). Exemplo: `` - `data-vm="zoom-out"` (apelidos: reduzir, zoomOut): Aparece encolhendo de um tamanho maior. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-scale` (number, padrão 1.06). Exemplo: `
...
` - `data-vm="blur-in"` (apelidos: desfocar, blurIn): Aparece saindo do desfoque, com leve subida. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-blur` (length, padrão 8). Exemplo: `

Título

` - `data-vm="rotate-in"` (apelidos: girar, rotateIn): Aparece girando levemente. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-angle` (number, padrão -3). Exemplo: `
...
` - `data-vm="flip-up"` (apelidos: virar, flipUp): Aparece virando em 3D, como uma carta levantando. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-angle` (number, padrão 14). Exemplo: `
...
` - `data-vm="skew-up"` (apelidos: inclinar, skewUp): Sobe com inclinação que se desfaz, sensação de velocidade. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-distance` (length, padrão 48). Exemplo: `

Rápido

` - `data-vm="clip-up"` (apelidos: revelar-cima, clipUp): Revela com uma máscara que se abre de baixo para cima. Ótimo para imagens. Parâmetros: `data-vm-duration` (time, padrão 1.2), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.inOut"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"). Exemplo: `` - `data-vm="clip-down"` (apelidos: revelar-baixo, clipDown): Revela com uma máscara que se abre de cima para baixo. Ótimo para imagens. Parâmetros: `data-vm-duration` (time, padrão 1.2), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.inOut"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"). Exemplo: `` - `data-vm="clip-left"` (apelidos: revelar-esquerda, clipLeft): Revela com uma máscara que se abre da direita para a esquerda. Ótimo para imagens. Parâmetros: `data-vm-duration` (time, padrão 1.2), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.inOut"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"). Exemplo: `` - `data-vm="clip-right"` (apelidos: revelar-direita, clipRight): Revela com uma máscara que se abre da esquerda para a direita. Ótimo para imagens. Parâmetros: `data-vm-duration` (time, padrão 1.2), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.inOut"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"). Exemplo: `` - `data-vm="image-reveal"` (apelidos: revelar-imagem, imageReveal): A moldura se abre enquanto a foto desfaz um zoom por dentro (efeito de revista). Parâmetros: `data-vm-duration` (time, padrão 1.4), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.inOut"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-scale` (number, padrão 1.3). Exemplo: `
` - `data-vm="curtain"` (apelidos: cortina): Uma faixa de cor passa por cima e revela o conteúdo (transição de cinema). Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-color` (color, padrão "currentColor"), `data-vm-direction` (enum: left|right|up|down, padrão "right"). Exemplo: `
Conteúdo
` - `data-vm="tile-reveal"` (apelidos: revelar-em-blocos, mosaico, tiles, grid-reveal): A imagem aparece montada em blocos que viram ou caem no lugar, em onda a partir de um canto ou do centro, quando entra na tela. Parâmetros: `data-vm-rows` (number, padrão 5), `data-vm-cols` (number, padrão 8), `data-vm-from` (enum: start|center|end|random, padrão "start"), `data-vm-effect` (enum: flip|fade|drop, padrão "flip"), `data-vm-duration` (time, padrão 1.4). Exemplo: `
Descrição
` ## Grupos (filhos em sequência) - `data-vm="stagger"` (apelidos: cascata, em-sequencia): Anima os filhos diretos um depois do outro com o efeito escolhido. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-effect` (enum: fade|fade-up|fade-left|fade-right|zoom-in|blur-in|flip-up, padrão "fade-up"), `data-vm-each` (time, padrão 0.08), `data-vm-from` (enum: start|center|end|edges|random, padrão "start"), `data-vm-selector` (selector, padrão ""). Exemplo: `
  • Agenda online
  • Lembretes por WhatsApp
  • Pagamento antecipado
  • Relatórios do mês
` - `data-vm="grid-wave"` (apelidos: onda, gridWave): Os itens de uma grade aparecem em onda, a partir do centro ou de um canto. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-from` (enum: center|start|end, padrão "center"), `data-vm-amount` (time, padrão 0.6). Exemplo: `
` - `data-vm="list-reveal"` (apelidos: lista-revelada, lista-com-linhas, table-reveal): Lista (ou linhas de tabela, ou cartões) que se monta item por item: a linha divisória se desenha da esquerda e o conteúdo sobe logo atrás. Para listas de serviços, preços e etapas. Parâmetros: `data-vm-each` (time, padrão 0.09), `data-vm-line` (boolean, padrão true). Exemplo: `
  • Corte masculino R$ 45
  • Barba completa R$ 35
  • Corte + barba R$ 70
` - `data-vm="deal-cards"` (apelidos: distribuir-cartas, cartas-do-monte, dealCards): Os filhos começam empilhados no centro como um monte de cartas, meio tortos, e são distribuídos um a um até o lugar de cada um, quando a área aparece. Parâmetros: `data-vm-each` (time, padrão 0.08), `data-vm-spread` (number, padrão 10), `data-vm-duration` (time, padrão 0.9). Exemplo: `
Plano Essencial
Plano Profissional
Plano Completo
` - `data-vm="stagger-3d"` (apelidos: cascata-3d, entrada-3d, depth-stagger): Os filhos chegam de dentro da tela, inclinados em 3D, em onda a partir do início ou do centro. Dá profundidade a grades de cartões e galerias. Parâmetros: `data-vm-from` (enum: start|center|end, padrão "start"), `data-vm-angle` (number, padrão 55), `data-vm-each` (time, padrão 0.07). Exemplo: `
1
2
3
4
5
6
` ## Texto - `data-vm="text-reveal"` (apelidos: texto-revelar, textReveal, split-reveal): O texto sobe de dentro de uma máscara, por linha, palavra ou letra (título de cinema). Parâmetros: `data-vm-duration` (time, padrão 1.15), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-by` (enum: lines|words|chars, padrão "lines"), `data-vm-each` (time, padrão null). Exemplo: `

Uma frase que entra

` - `data-vm="text-fade"` (apelidos: texto-surgir, textFade): As letras surgem uma a uma com leve desfoque. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-each` (time, padrão 0.02). Exemplo: `

Letra por letra

` - `data-vm="scroll-text"` (apelidos: texto-rolagem, scrollText, text-scrub): Parágrafo que vai "acendendo" palavra por palavra conforme a página rola. Parâmetros: `data-vm-start` (string, padrão "top 80%"), `data-vm-end` (string, padrão "bottom 40%"), `data-vm-dim` (number, padrão 0.18). Exemplo: `

Um manifesto que acende conforme você lê.

` - `data-vm="scramble"` (apelidos: embaralhar, text-scramble): O texto aparece embaralhado e se revela letra a letra (estilo terminal/hacker). Parâmetros: `data-vm-duration` (time, padrão 1.2), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"). Exemplo: `SISTEMA ONLINE` - `data-vm="typewriter"` (apelidos: maquina-de-escrever, digitar): Digita o texto como uma máquina de escrever, com cursor piscando. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-speed` (number, padrão 28), `data-vm-cursor` (enum: true|false|hide, padrão "true"). Exemplo: `

Olá, eu sou digitado.

` - `data-vm="counter"` (apelidos: contador, count-up): Conta do zero até o número escrito no elemento (formatação local, ex.: 1.250). Parâmetros: `data-vm-duration` (time, padrão 1.8), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-from` (number, padrão 0), `data-vm-to` (number, padrão null), `data-vm-prefix` (string, padrão ""), `data-vm-suffix` (string, padrão ""), `data-vm-decimals` (number, padrão null). Exemplo: `1250` - `data-vm="highlight"` (apelidos: marca-texto, grifar): Um marca-texto ou sublinhado se desenha por trás da palavra. Parâmetros: `data-vm-duration` (time, padrão 1), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "expo.out"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-color` (color, padrão "rgba(239,101,15,.28)"), `data-vm-style` (enum: marker|underline, padrão "marker"). Exemplo: `Somos rápidos de verdade.` - `data-vm="split-flap"` (apelidos: letreiro-aeroporto, flap, splitFlap): Letreiro de aeroporto: cada letra gira por caracteres até parar na certa, da esquerda para a direita. Parâmetros: `data-vm-speed` (number, padrão 22), `data-vm-each` (time, padrão 0.06), `data-vm-chars` (string, padrão "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"). Exemplo: `

PARTIDA 18:45

` - `data-vm="scroll-float"` (apelidos: letras-flutuam, scrollFloat): As letras sobem esticadas e assentam conforme a página rola (presas à rolagem). Parâmetros: `data-vm-start` (string, padrão "top 90%"), `data-vm-end` (string, padrão "center 55%"). Exemplo: `

Leve como o ar

` - `data-vm="true-focus"` (apelidos: foco, trueFocus): Uma palavra por vez fica nítida e emoldurada por cantos; as outras ficam desfocadas. O foco passeia sozinho ou segue o mouse. Parâmetros: `data-vm-blur` (number, padrão 5), `data-vm-interval` (time, padrão 1.6), `data-vm-manual` (boolean, padrão false). Exemplo: `

Atenção ao que importa

` - `data-vm="curved-loop"` (apelidos: texto-em-curva, curvedLoop, texto-curvo): Uma faixa de texto corre sem fim ao longo de uma curva suave. A rolagem acelera; dá para arrastar. Parâmetros: `data-vm-speed` (number, padrão 60), `data-vm-curve` (number, padrão 80), `data-vm-direction` (enum: left|right, padrão "left"). Exemplo: `
Design ✦ Código ✦ Movimento ✦
` - `data-vm="stroke-text"` (apelidos: texto-contorno, contorno, strokeText): O contorno das letras é desenhado como caneta e depois o preenchimento aparece. Parâmetros: `data-vm-duration` (time, padrão 2.2), `data-vm-fill` (boolean, padrão true). Exemplo: `

Assinatura

` - `data-vm="blur-text"` (apelidos: texto-desfocado, blurText): As palavras (ou letras) chegam saindo do desfoque, em cascata, com leve subida. Elegante para títulos de abertura. Parâmetros: `data-vm-by` (enum: words|chars, padrão "words"), `data-vm-direction` (enum: top|bottom, padrão "top"), `data-vm-each` (time, padrão 0.07). Exemplo: `

Simples por fora, completo por dentro.

` - `data-vm="shuffle-text"` (apelidos: embaralhar-hover, shuffle): No hover (e ao aparecer), as letras trocam por símbolos e voltam ao lugar uma a uma, da esquerda para a direita. Parâmetros: `data-vm-chars` (string, padrão "01!<>-_\\/[]{}=+*^?#ABCDEFGHIJKLMNOPQRSTUVWXYZ"), `data-vm-speed` (number, padrão 45). Exemplo: `Ver o projeto` - `data-vm="wave-text"` (apelidos: texto-onda, waveText): Uma onda suave percorre as letras continuamente (ou só no hover). Bom para chamadas curtas e selos. Parâmetros: `data-vm-amplitude` (number, padrão 0.12), `data-vm-speed` (number, padrão 2.2), `data-vm-hover` (boolean, padrão false). Exemplo: `

Agende em 30 segundos

` - `data-vm="falling-text"` (apelidos: texto-cai, fallingText, gravity-text): Ao clicar (ou passar o mouse), as palavras se soltam e caem com gravidade, quicam no chão do bloco e se espalham. Clique de novo para voltar. Parâmetros: `data-vm-trigger` (enum: click|hover|view|load, padrão "click"), `data-vm-gravity` (number, padrão 2200). Exemplo: `
Clique e veja as palavras caírem com gravidade de verdade
` - `data-vm="echo-text"` (apelidos: texto-eco, echoText): Cópias do título em camadas, deslocadas e cada vez mais apagadas, que acompanham o cursor (efeito de profundidade e eco). Parâmetros: `data-vm-layers` (number, padrão 5), `data-vm-distance` (number, padrão 8). Exemplo: `

ECO

` - `data-vm="masked-text"` (apelidos: texto-com-imagem, image-text, maskedText): A imagem (ou degradê animado) aparece dentro das letras e desliza devagar. Use em títulos grandes e grossos. Parâmetros: `data-vm-image` (string, padrão ""), `data-vm-speed` (time, padrão 14). Exemplo: `

VERÃO

` - `data-vm="odometer"` (apelidos: odometro, contador-rolante, rolling-number): Número com dígitos que rolam como num odômetro até o valor (cada casa gira na sua velocidade). Mais vivo que um contador comum. Parâmetros: `data-vm-duration` (time, padrão 1.8), `data-vm-prefix` (string, padrão ""), `data-vm-suffix` (string, padrão ""). Exemplo: `12.480` - `data-vm="text-pressure"` (apelidos: pressao-de-texto, textPressure): Título largo cujas letras engrossam e esticam conforme a distância do cursor (fonte variável fica ainda melhor). Bom para heróis tipográficos. Parâmetros: `data-vm-radius` (number, padrão 260), `data-vm-min` (number, padrão 300), `data-vm-max` (number, padrão 800). Exemplo: `

PRESSÃO

` - `data-vm="fuzzy-text"` (apelidos: texto-difuso, fuzzyText, texto-tremido): Texto com interferência: as linhas horizontais das letras tremem de lado, sutil parado e forte com o mouse em cima (estética de sinal analógico). Parâmetros: `data-vm-base` (number, padrão 0.12), `data-vm-hover` (number, padrão 0.6). Exemplo: `

404

` - `data-vm="countdown"` (apelidos: contagem-regressiva, cronometro, timer): Contagem regressiva até uma data, com dias, horas, minutos e segundos; cada dígito que muda rola com desfoque. Ao zerar, dispara o evento vm:done. Parâmetros: `data-vm-to` (string, padrão ""), `data-vm-labels` (string, padrão "dias|horas|min|seg"). Exemplo: `
` - `data-vm="text-roll"` (apelidos: rolar-letras, letras-rolando, textRoll, letter-roll): No hover, cada letra rola para cima e é substituída por uma cópia vinda de baixo, em cascata. Para menus e links curtos. Parâmetros: `data-vm-each` (time, padrão 0.025), `data-vm-duration` (time, padrão 0.45). Exemplo: `Portfólio` - `data-vm="video-text"` (apelidos: video-no-texto, texto-com-video, videoText): Um vídeo toca dentro das letras de um título grande, sobre qualquer fundo (claro, escuro, degradê ou foto). As letras viram o recorte do vídeo com a fonte da própria página; o texto continua real para leitores de tela e buscadores. Parâmetros: `data-vm-src` (string, padrão ""), `data-vm-poster` (string, padrão ""). Exemplo: `

ONDA

` - `data-vm="placeholder-typer"` (apelidos: placeholder-digitado, exemplos-na-busca, typing-placeholder): O placeholder do campo vai digitando e apagando exemplos (separe com |). Para buscas e formulários de cadastro. Para quando a pessoa clica ou digita. Parâmetros: `data-vm-words` (string, padrão ""), `data-vm-prefix` (string, padrão ""), `data-vm-speed` (number, padrão 1). Exemplo: `` ## Presos à rolagem (cinematográficos) - `data-vm="parallax"` (apelidos: paralaxe, profundidade): O elemento rola numa velocidade diferente da página, criando profundidade. Parâmetros: `data-vm-speed` (number, padrão 0.2), `data-vm-axis` (enum: y|x, padrão "y"). Exemplo: `` - `data-vm="scrub"` (apelidos: rolagem, scroll-scrub): Anima de um estado para outro presa à rolagem. Use data-vm-from e data-vm-to com propriedades (ex.: "x:-200; rotate:-10; opacity:0"). Parâmetros: `data-vm-from` (props, padrão ""), `data-vm-to` (props, padrão ""), `data-vm-start` (string, padrão "top bottom"), `data-vm-end` (string, padrão "bottom top"), `data-vm-smooth` (number, padrão 0.5), `data-vm-ease` (ease, padrão "linear"). Exemplo: `
...
` - `data-vm="scale-on-scroll"` (apelidos: zoom-rolagem, scaleOnScroll): A imagem cresce (ou abre de cartão para tela cheia) enquanto você rola. Parâmetros: `data-vm-from` (number, padrão 0.8), `data-vm-to` (number, padrão 1), `data-vm-radius` (length, padrão 24), `data-vm-start` (string, padrão "top bottom"), `data-vm-end` (string, padrão "center center"). Exemplo: `
` - `data-vm="progress"` (apelidos: barra-de-progresso, reading-progress): Barra que enche conforme a leitura da página (ou de uma seção com data-vm-target). Parâmetros: `data-vm-target` (selector, padrão ""), `data-vm-axis` (enum: x|y, padrão "x"). Exemplo: `
` - `data-vm="pin-scene"` (apelidos: cena-fixa, cena, pinScene, scrollytelling): A seção fica parada na tela enquanto você rola, e os passos dentro dela ([data-vm-step]) vão se revezando como cenas de um filme. Parâmetros: `data-vm-length` (length, padrão "300%"), `data-vm-transition` (enum: fade|slide|zoom|blur, padrão "fade"), `data-vm-smooth` (number, padrão 0.4), `data-vm-progress-var` (boolean, padrão true). Exemplo: `
Capítulo 1
Capítulo 2
Capítulo 3
` - `data-vm="horizontal"` (apelidos: trilho-horizontal, horizontal-scroll): A seção fica parada e o trilho interno ([data-vm-track] ou o primeiro filho) anda para o lado conforme você rola. Parâmetros: `data-vm-smooth` (number, padrão 0.3). Exemplo: `
...cartões...
` - `data-vm="sequence"` (apelidos: sequencia-de-imagens, image-sequence, frames): Toca uma sequência de imagens (quadros de vídeo) presa à rolagem num , como nas páginas de produto da Apple. Parâmetros: `data-vm-src` (string, padrão ""), `data-vm-frames` (number, padrão 60), `data-vm-pad` (number, padrão 3), `data-vm-length` (length, padrão "300%"). Exemplo: `` - `data-vm="bg-color"` (apelidos: cor-de-fundo, theme-switch): Quando a seção chega ao meio da tela, o fundo e o texto da página mudam de cor suavemente (troca de "clima" entre capítulos). Parâmetros: `data-vm-bg` (color, padrão "#0a0a0a"), `data-vm-color` (color, padrão "#ffffff"), `data-vm-target` (selector, padrão "body"). Exemplo: `
...
` - `data-vm="velocity-skew"` (apelidos: inclinar-na-rolagem, velocitySkew): Os elementos inclinam conforme a velocidade da rolagem e voltam ao parar (sensação de inércia). Parâmetros: `data-vm-max` (number, padrão 8). Exemplo: `
` - `data-vm="marquee"` (apelidos: letreiro, ticker): Faixa que rola sem fim (logos, palavras). Acelera e inverte com a rolagem da página. Parâmetros: `data-vm-speed` (number, padrão 60), `data-vm-direction` (enum: left|right, padrão "left"), `data-vm-scroll-boost` (boolean, padrão true). Exemplo: `
DesignCódigoMovimentoMarca
` - `data-vm="stack-sections"` (apelidos: secoes-empilhadas, paineis-empilhados, stacking-sections): As seções filhas ficam paradas e a seguinte desliza por cima delas, como folhas empilhadas. A de baixo encolhe e escurece um pouco enquanto é coberta. Parâmetros: `data-vm-scale` (number, padrão 0.92), `data-vm-dim` (number, padrão 0.45). Exemplo: `
Um
Dois
Três
` - `data-vm="circle-reveal"` (apelidos: revelar-em-circulo, circulo-que-abre, iris): A seção aparece por um círculo que cresce enquanto ela entra na tela, a partir do centro ou de um canto. Bom para virar o clima da página (fundo escuro depois de claro). Parâmetros: `data-vm-origin` (enum: center|top|bottom|left|right, padrão "center"), `data-vm-start` (string, padrão "top bottom"), `data-vm-end` (string, padrão "top 15%"). Exemplo: `
...
` - `data-vm="timeline"` (apelidos: linha-do-tempo, linha-de-etapas, historia, process): Linha do tempo vertical: a linha enche conforme a página rola e cada etapa acende (bolinha colorida e conteúdo entrando) quando a linha chega nela. Os filhos são as etapas. Parâmetros: `data-vm-side` (enum: left|alternate, padrão "left"). Exemplo: `

  1. Agendamento

    O cliente escolhe o horário pelo site.

  2. Lembrete

    Aviso no WhatsApp um dia antes.

  3. Atendimento

    Check-in e pagamento no Pix.

` - `data-vm="columns-parallax"` (apelidos: colunas-em-paralaxe, colunas-opostas, parallax-columns): Colunas de fotos que andam em sentidos opostos enquanto a página rola (as ímpares sobem, as pares descem). Cada filho é uma coluna; coloque fotos que somem mais que a altura da área. Parâmetros: `data-vm-distance` (number, padrão 18). Exemplo: `
` - `data-vm="zoom-through-text"` (apelidos: mergulhar-no-texto, atravessar-letra, zoom-text, text-zoom-reveal): A seção fica parada e a câmera mergulha numa letra de um título gigante até ela ocupar a tela; aí o título some e aparece o conteúdo marcado com [data-vm-reveal] (uma foto, um vídeo, outro título). Parâmetros: `data-vm-letter` (number, padrão -1), `data-vm-scale` (number, padrão 70), `data-vm-length` (string, padrão "+=160%"). Exemplo: `

VATSE

` - `data-vm="sticky-bar"` (apelidos: barra-fixa, barra-de-compra, sticky-cta): Barra fixa de compra que sobe da borda quando o botão principal (data-vm-target) sai da tela e desce de volta quando ele reaparece. Ideal para página de produto e página de venda no celular. Parâmetros: `data-vm-target` (selector, padrão ""), `data-vm-side` (enum: bottom|top, padrão "bottom"). Exemplo: `Assinar agora
Plano Pro R$ 89/mêsAssinar
` ## SVG - `data-vm="draw"` (apelidos: desenhar, svg-draw): Desenha o traço de um SVG (path, line, circle...). Com data-vm-scrub="true" o traço acompanha a rolagem. Parâmetros: `data-vm-duration` (time, padrão 1.6), `data-vm-delay` (time, padrão 0), `data-vm-ease` (ease, padrão "power2.inOut"), `data-vm-start` (string, padrão "top 85%"), `data-vm-once` (boolean, padrão true), `data-vm-trigger` (enum: scroll|load|hover|click|manual, padrão "scroll"), `data-vm-scrub` (boolean, padrão false). Exemplo: `` - `data-vm="motion-path"` (apelidos: trajetoria, caminho, seguir-caminho, motionPath): Um elemento [data-vm-follower] percorre o path de um SVG (o primeiro, ou o marcado com [data-vm-path]), virando na direção da curva. Pela rolagem (scroll) ou em volta contínua (loop); o traço pode ir se desenhando atrás. Parâmetros: `data-vm-mode` (enum: scroll|loop, padrão "scroll"), `data-vm-duration` (time, padrão 6), `data-vm-rotate` (boolean, padrão true), `data-vm-trail` (boolean, padrão true), `data-vm-smooth` (number, padrão 0.4). Exemplo: `
✈
` - `data-vm="morph-shape"` (apelidos: morfar-forma, transformar-forma, morphSVG, shape-morph): Um path de SVG se transforma suavemente em outras formas, mesmo com número de pontos diferente. As formas vão em data-vm-shapes, separadas por "|". Em ciclo, pela rolagem ou ao passar o mouse. Parâmetros: `data-vm-shapes` (string, padrão ""), `data-vm-mode` (enum: loop|scroll|hover, padrão "loop"), `data-vm-duration` (time, padrão 1.2), `data-vm-hold` (time, padrão 1.2), `data-vm-points` (number, padrão 120). Exemplo: ` ` - `data-vm="text-on-path"` (apelidos: texto-na-curva, texto-em-onda, textPath): O texto corre sobre uma curva (onda ou arco) que ocupa a largura do elemento. A rolagem empurra o texto, ou ele anda sozinho em loop. Parâmetros: `data-vm-shape` (enum: wave|arc|arc-down, padrão "wave"), `data-vm-mode` (enum: scroll|loop, padrão "scroll"), `data-vm-speed` (number, padrão 40), `data-vm-size` (number, padrão 36). Exemplo: `
Agenda online · Pagamento no Pix · Lembrete no WhatsApp ·
` - `data-vm="sketch"` (apelidos: desenho-a-mao, rabisco, draw-sequence): Desenha os traços do SVG um depois do outro, como alguém desenhando à mão (cada traço leva o tempo do seu tamanho), e só no fim pinta os preenchimentos. Para ilustrações de linha, assinaturas e ícones grandes. Parâmetros: `data-vm-duration` (time, padrão 2.4), `data-vm-fill` (boolean, padrão true). Exemplo: ` ` - `data-vm="wave-divider"` (apelidos: divisoria-onda, onda-de-secao, waveDivider): Borda em onda viva entre duas seções: duas ondas sobrepostas balançam devagar no topo ou no pé da seção. A cor padrão é a do fundo da seção vizinha (defina com data-vm-color). Parâmetros: `data-vm-position` (enum: bottom|top, padrão "bottom"), `data-vm-color` (color, padrão "currentColor"), `data-vm-height` (number, padrão 80), `data-vm-speed` (number, padrão 0.6). Exemplo: `
` ## Interação com o cursor - `data-vm="magnetic"` (apelidos: magnetico, ima): O botão é atraído pelo cursor quando ele chega perto. Parâmetros: `data-vm-strength` (number, padrão 0.35), `data-vm-radius` (number, padrão 80). Exemplo: `Fale com a gente` - `data-vm="tilt"` (apelidos: inclinacao-3d, tilt-3d): O cartão inclina em 3D seguindo o cursor. Expõe --vm-glare-x/--vm-glare-y para um brilho em CSS. Parâmetros: `data-vm-max` (number, padrão 10), `data-vm-perspective` (number, padrão 900). Exemplo: `

Plano Pro

Tudo do Essencial, mais relatórios e equipe.

` - `data-vm="follow"` (apelidos: seguir-cursor, hover-image): O elemento segue o cursor dentro da área do pai (ex.: foto que aparece sobre uma lista). Parâmetros: `data-vm-speed` (number, padrão 9). Exemplo: `
` - `data-vm="float"` (apelidos: flutuar, flutuante, floating): O elemento flutua sozinho num balanço lento (sobe, desce e gira de leve) e, com mouse, se afasta do cursor com profundidade. Usa as propriedades translate/rotate do CSS, então combina com parallax, tilt e entradas no mesmo elemento. Parâmetros: `data-vm-amplitude` (number, padrão 14), `data-vm-duration` (time, padrão 6), `data-vm-rotate` (number, padrão 2), `data-vm-depth` (number, padrão 18). Exemplo: `` - `data-vm="cursor"` (apelidos: cursor-proprio): Liga o cursor próprio (ponto + anel). Coloque no . Use data-vm-cursor="Ver" nos elementos para mostrar um texto no anel. Parâmetros: `data-vm-lag` (number, padrão 14). Exemplo: `` - `data-vm="button-fx"` (apelidos: botao-efeito, efeito-de-botao, buttonHover, btn-fx): Efeitos de hover para botões e links com cara de botão: fill (a cor enche a partir do cursor), shine (brilho atravessa), arrow (a seta sai e volta), roll (o texto rola para cima e volta por baixo), press (afunda ao clicar, com mola). Parâmetros: `data-vm-variant` (enum: fill|shine|arrow|roll|press, padrão "fill"). Exemplo: `Começar agora` - `data-vm="link-underline"` (apelidos: sublinhado, sublinhado-animado, underline): Sublinhado animado para links: grow (cresce da esquerda), center (abre do meio), swap (o traço sai pela direita e entra pela esquerda), wave (vira onda). Funciona em vários links de uma vez se aplicado ao contêiner. Parâmetros: `data-vm-variant` (enum: grow|center|swap|wave, padrão "swap"), `data-vm-thickness` (length, padrão 2). Exemplo: `` - `data-vm="hamburger"` (apelidos: menu-hamburguer, botao-menu, menu-toggle): Botão de menu de três traços que vira X ao abrir (e volta). Cuida de aria-expanded; com data-vm-target abre e fecha o alvo (classe is-open e atributo hidden) e fecha com Esc. Parâmetros: `data-vm-target` (selector, padrão ""), `data-vm-variant` (enum: cross|arrow|squeeze, padrão "cross"). Exemplo: ` ` - `data-vm="toggle-switch"` (apelidos: chave, interruptor, switch): Transforma um checkbox numa chave liga/desliga com mola e brilho. O input continua lá (teclado, formulário e leitor de tela funcionam igual). Parâmetros: `data-vm-size` (length, padrão 28). Exemplo: `` - `data-vm="ripple"` (apelidos: onda-de-toque, ondulacao, ink): Onda que se espalha a partir do ponto do toque ou clique (como no Material), na cor do texto do elemento. Parâmetros: `data-vm-duration` (time, padrão 0.6), `data-vm-opacity` (number, padrão 0.28). Exemplo: `` - `data-vm="mouse-parallax"` (apelidos: paralaxe-do-mouse, camadas-com-mouse, mouseParallax, depth-layers): As camadas [data-vm-depth="0.1"…"1"] se deslocam com o mouse, cada uma na sua profundidade, dando volume à cena. Quanto maior o número, mais a camada anda. No celular, fica parado. Parâmetros: `data-vm-strength` (number, padrão 40), `data-vm-smooth` (number, padrão 6), `data-vm-invert` (boolean, padrão false). Exemplo: `

Profundidade

` - `data-vm="float-label"` (apelidos: rotulo-flutuante, label-flutuante, floating-label): Nos campos com ` - `data-vm="form-feedback"` (apelidos: retorno-do-formulario, validacao-animada, form-shake): Validação com movimento: o campo inválido balança e a mensagem do navegador aparece embaixo deslizando (marcando aria-invalid); ao corrigir, some. No envio válido, o botão mostra que está enviando. Parâmetros: `data-vm-sending` (string, padrão "Enviando…"). Exemplo: `
` - `data-vm="price-toggle"` (apelidos: preco-mensal-anual, alternar-preco, pricing-toggle, billing-switch): Chave Mensal/Anual com pílula deslizante: os preços marcados com data-vm-monthly e data-vm-yearly rolam até o novo valor, e trechos com data-vm-period="yearly" ou "monthly" aparecem e somem. Mostra a economia do anual. Parâmetros: `data-vm-monthly` (string, padrão "Mensal"), `data-vm-yearly` (string, padrão "Anual"), `data-vm-badge` (string, padrão ""), `data-vm-start` (enum: monthly|yearly, padrão "monthly"). Exemplo: `

Profissional

R$ 149/mês cobrado R$ 1.428 por ano
` - `data-vm="card-fan"` (apelidos: leque, cartas-em-leque, card-spread): Cartões empilhados que se abrem em leque quando aparecem (ou ao passar o mouse); o cartão sob o cursor sobe um pouco. Bom para planos, depoimentos e capas. Parâmetros: `data-vm-mode` (enum: view|hover, padrão "view"), `data-vm-spread` (number, padrão 12). Exemplo: `
` - `data-vm="back-to-top"` (apelidos: voltar-ao-topo, ir-ao-topo, scroll-top): Botão de voltar ao topo que aparece depois de rolar uma tela, com um anel que mostra quanto da página já foi lido. Coloque num ` - `data-vm="scrollspy"` (apelidos: menu-que-segue, secao-ativa, indicador-de-secao): Num menu com links para seções (#id), o link da seção que está sendo lida fica marcado e uma pílula desliza até ele. Marca aria-current para leitores de tela. Parâmetros: `data-vm-style` (enum: pill|underline, padrão "pill"). Exemplo: `` - `data-vm="tooltip"` (apelidos: dica, balao-de-ajuda): Balão de dica que aparece com uma pequena mola no hover e no foco do teclado (ligado por aria-describedby), em cima ou embaixo conforme o espaço. O texto vem de data-vm-text. Parâmetros: `data-vm-text` (string, padrão ""), `data-vm-placement` (enum: top|bottom, padrão "top"). Exemplo: `` - `data-vm="copy-button"` (apelidos: copiar, botao-copiar): Botão que copia um texto (data-vm-text) ou o conteúdo de outro elemento (data-vm-target) e confirma com o ícone virando ✓ e o rótulo "Copiado". Bom para chave Pix, cupom, código e link de indicação. Parâmetros: `data-vm-text` (string, padrão ""), `data-vm-target` (selector, padrão ""), `data-vm-done` (string, padrão "Copiado!"). Exemplo: `` - `data-vm="heart-burst"` (apelidos: curtir, like, coracao): Botão de curtir: o coração enche com um pulo e solta uma explosão de partículas; clicar de novo desfaz. Marca aria-pressed e, com data-vm-count, atualiza o número. Parâmetros: `data-vm-count` (number, padrão -1), `data-vm-color` (color, padrão "#ef4444"). Exemplo: `` - `data-vm="search-expand"` (apelidos: busca-expansivel, lupa): Busca recolhida num ícone de lupa que se expande num campo ao clicar (e recolhe com Esc ou ao sair vazia). Envolva um ; com
, o envio continua normal. Parâmetros: `data-vm-width` (length, padrão 260). Exemplo: `
` - `data-vm="dropdown"` (apelidos: menu-suspenso, lista-suspensa): Menu suspenso: o botão abre a lista (o elemento seguinte, ou [data-vm-list]) com escala e esmaecer. Setas navegam, Esc e clique fora fecham, aria-expanded acompanha. Parâmetros: nenhum. Exemplo: `
` - `data-vm="otp-input"` (apelidos: codigo-de-verificacao, codigo-sms, pin-input): Código de verificação em caixinhas: digitar pula para a próxima, apagar volta, colar o código inteiro preenche tudo e o último dígito dispara o evento vm:complete. O original (com name) recebe o valor e vai no envio do formulário. Parâmetros: `data-vm-length` (number, padrão 6). Exemplo: `
` - `data-vm="password-meter"` (apelidos: forca-da-senha, senha-forte): Medidor de força de senha sob o campo: a barra cresce e muda de cor (fraca, média, boa, forte) e uma lista mostra o que falta (8 caracteres, letra maiúscula, número, símbolo). Também põe o botão de mostrar e esconder a senha. Parâmetros: `data-vm-min` (number, padrão 8), `data-vm-toggle` (boolean, padrão true). Exemplo: `` - `data-vm="dropzone"` (apelidos: enviar-arquivos, area-de-upload, arrastar-arquivos): Área de enviar arquivos: arrastar por cima acende a borda, soltar (ou clicar e escolher) lista cada arquivo num cartão com nome, tamanho e miniatura de imagem, e cada um pode ser removido. Os arquivos ficam no original, então o formulário envia normalmente. Parâmetros: `data-vm-text` (string, padrão "Arraste arquivos aqui ou clique para escolher"), `data-vm-max` (number, padrão 10). Exemplo: `
` - `data-vm="fly-to-cart"` (apelidos: voar-para-o-carrinho, adicionar-ao-carrinho): No botão de comprar: uma cópia da foto do produto voa num arco até o carrinho (data-vm-target), que dá um pulo e soma o contador. A foto é a do cartão mais próximo com [data-vm-item]. Dispara vm:add com o total. Parâmetros: `data-vm-target` (selector, padrão "[data-vm-cart]"), `data-vm-duration` (time, padrão 0.75). Exemplo: `🛒 0
Kit barba
` - `data-vm="quantity"` (apelidos: quantidade, seletor-de-quantidade, qty): Seletor de quantidade com botões − e + em volta de um : o número rola para cima ou para baixo ao mudar e os botões travam no mínimo e no máximo (min e max do input). Parâmetros: nenhum. Exemplo: `
` ## Experiências (entrar no lugar) - `data-vm="zoom-gallery"` (apelidos: galeria-zoom, entrar-na-galeria, zoomGallery, dive): Galeria parada na tela; ao rolar, a câmera mergulha no item em foco ([data-vm-focus]) até ele ocupar a tela inteira e virar a próxima seção, que continua rolando. Para emendar sem costura, comece a próxima seção com a mesma imagem em tela cheia. Parâmetros: `data-vm-length` (length, padrão "250%"), `data-vm-ease` (ease, padrão "power2.inOut"), `data-vm-fade-others` (boolean, padrão true), `data-vm-handoff` (boolean, padrão true), `data-vm-smooth` (number, padrão 0.35). Exemplo: `
...
` - `data-vm="depth-gallery"` (apelidos: tunel, túnel, galeria-profundidade, depthGallery, tunnel): Túnel: os itens ([data-vm-item]) ficam espalhados em profundidade e a rolagem move a câmera para dentro, passando por eles (sensação de entrar no lugar). Parâmetros: `data-vm-length` (length, padrão "400%"), `data-vm-depth` (number, padrão 480), `data-vm-spread` (number, padrão 0.36), `data-vm-perspective` (number, padrão 900), `data-vm-smooth` (number, padrão 0.4). Exemplo: `

Texto no meio do caminho

` - `data-vm="stack-cards"` (apelidos: pilha, empilhar, cartoes-empilhados, stackCards): Cartões (filhos diretos) que grudam no topo e se empilham: cada um encolhe e escurece atrás do próximo que chega. Parâmetros: `data-vm-top` (length, padrão "12vh"), `data-vm-gap` (number, padrão 18), `data-vm-scale` (number, padrão 0.06). Exemplo: `
1
2
3
` - `data-vm="expand"` (apelidos: expandir, abrir-tela-cheia, expand-media): A mídia começa como um cartão no meio da seção e, ao rolar, abre até a tela cheia (com a seção parada). Conteúdo marcado com [data-vm-reveal] aparece no fim. Parâmetros: `data-vm-length` (length, padrão "150%"), `data-vm-inset` (string, padrão "18% 22%"), `data-vm-radius` (length, padrão 28), `data-vm-smooth` (number, padrão 0.35). Exemplo: `

Bem-vindo

` - `data-vm="card-expand"` (apelidos: cartao-expande, abrir-cartao, cardExpand, app-card): Ao clicar, o cartão cresce até ocupar a tela e vira uma página com rolagem própria (conteúdo em [data-vm-detail]). Esc, o botão [data-vm-close] ou o voltar do navegador fecham, e ele volta ao lugar. Parâmetros: `data-vm-duration` (time, padrão 0.7), `data-vm-ease` (ease, padrão "expo.inOut"), `data-vm-radius` (length, padrão 0), `data-vm-history` (boolean, padrão true). Exemplo: `

Título

` - `data-vm="morph-link"` (apelidos: link-que-vira-pagina, morphLink, shared-element): Link com imagem: ao clicar, a imagem cresce até a tela cheia e a navegação acontece; na página de destino, o elemento data-vm="morph-target" com o mesmo data-vm-id continua o movimento até o lugar dele (a foto "vira" a capa da outra página). Parâmetros: `data-vm-id` (string, padrão ""), `data-vm-duration` (time, padrão 0.6), `data-vm-ease` (ease, padrão "expo.inOut"). Exemplo: ` ` - `data-vm="morph-target"` (apelidos: destino-do-link, morphTarget): Elemento da página de destino de um morph-link: se a navegação veio do link com o mesmo data-vm-id, ele começa em tela cheia e anima até o próprio lugar. Parâmetros: `data-vm-id` (string, padrão ""), `data-vm-duration` (time, padrão 0.8), `data-vm-ease` (ease, padrão "expo.out"). Exemplo: `` - `data-vm="drag-slider"` (apelidos: carrossel-arrastar, arrastar, dragSlider, draggable): Trilho horizontal que se arrasta com o mouse ou o dedo, com inércia, retorno elástico nas pontas e encaixe em cada item. As setas do teclado também movem. Parâmetros: `data-vm-snap` (boolean, padrão true), `data-vm-friction` (number, padrão 0.9). Exemplo: `
` - `data-vm="split-screen"` (apelidos: tela-dividida, splitScreen, opposite-scroll): Duas colunas (filhos diretos) dentro de uma seção parada: a da esquerda sobe e a da direita desce enquanto você rola. Parâmetros: `data-vm-smooth` (number, padrão 0.3). Exemplo: `
` - `data-vm="video-scrub"` (apelidos: video-na-rolagem, videoScrub): O vídeo avança e volta quadro a quadro com a rolagem, com a seção parada. Expõe --vm-progress (0 a 1) na seção para legendas em CSS. Use vídeo com muitos quadros-chave (ex.: ffmpeg -g 1) para ficar fluido. Parâmetros: `data-vm-length` (length, padrão "300%"), `data-vm-smooth` (number, padrão 0.2). Exemplo: `
` - `data-vm="preloader"` (apelidos: carregamento, tela-de-abertura, loader, intro-counter): Tela de abertura que cobre a página com um contador de 0 a 100 que acompanha o carregamento real das imagens e sai com uma cortina. Use um elemento por página; [data-vm-count] recebe o número. Ao terminar, dispara o evento vm:loaded no document. Parâmetros: `data-vm-exit` (enum: curtain|split|fade, padrão "curtain"), `data-vm-min` (time, padrão 1.2), `data-vm-max` (time, padrão 6). Exemplo: `
0
` - `data-vm="page-transition"` (apelidos: transicao-de-pagina, troca-de-pagina, pageTransition, barba): Ao clicar num link do mesmo site, uma cortina cobre a tela antes de trocar de página, e na página nova ela sai. Respeita nova aba, download, âncora e teclas modificadoras. Coloque o elemento (a cortina) uma vez por página. Parâmetros: `data-vm-direction` (enum: up|down|left|right, padrão "up"), `data-vm-duration` (time, padrão 0.7), `data-vm-exclude` (string, padrão "[data-vm-no-transition]"). Exemplo: `
` ## Componentes animados (texto, fundos, interação) - `data-vm="shiny-text"` (apelidos: texto-brilhante, brilho, shinyText): Um brilho atravessa o texto de tempos em tempos (como reflexo em metal). Parâmetros: `data-vm-speed` (time, padrão 3), `data-vm-color` (color, padrão "rgba(255,255,255,.9)"). Exemplo: `Novo lançamento` - `data-vm="gradient-text"` (apelidos: texto-degrade, degrade, gradientText): Texto preenchido por um degradê que flui continuamente. Parâmetros: `data-vm-colors` (string, padrão ""), `data-vm-speed` (time, padrão 6). Exemplo: `

Título vivo

` - `data-vm="glitch-text"` (apelidos: texto-falha, glitch, glitchText): Efeito de falha digital: duas cópias deslocadas em cores tremem por cima do texto. Pode ficar só no hover. Parâmetros: `data-vm-hover` (boolean, padrão false), `data-vm-speed` (time, padrão 2.5). Exemplo: `

SISTEMA

` - `data-vm="decrypt-text"` (apelidos: decodificar, texto-decodifica, decryptText): O texto aparece decodificando (letras aleatórias que assentam da esquerda para a direita). Ao aparecer na tela ou ao passar o mouse. Parâmetros: `data-vm-on` (enum: view|hover|both, padrão "view"), `data-vm-speed` (number, padrão 40). Exemplo: `

Acesso liberado

` - `data-vm="rotating-text"` (apelidos: palavras-que-giram, texto-rotativo, rotatingText, word-rotate): Troca palavras em sequência no mesmo lugar (ex.: "feito para barbearias / clínicas / academias"). As palavras ficam nos filhos ou em data-vm-words separadas por |. Parâmetros: `data-vm-words` (string, padrão ""), `data-vm-interval` (time, padrão 2.2), `data-vm-effect` (enum: slide|fade|blur|flip, padrão "slide"). Exemplo: `Feito para barbearias` - `data-vm="circular-text"` (apelidos: texto-circular, circularText): Texto distribuído num círculo que gira devagar (selo, carimbo). Acelera com o mouse em cima. Parâmetros: `data-vm-speed` (time, padrão 18), `data-vm-size` (length, padrão 140). Exemplo: `
VATSE • MOTION • VATSE • MOTION •
` - `data-vm="proximity-text"` (apelidos: texto-proximidade, variable-proximity, proximityText): Cada letra fica mais pesada e maior conforme o cursor se aproxima (fonte variável funciona melhor; sem ela, usa escala). Parâmetros: `data-vm-radius` (number, padrão 140), `data-vm-weight-from` (number, padrão 300), `data-vm-weight-to` (number, padrão 900). Exemplo: `

Passe o mouse

` - `data-vm="aurora"` (apelidos: aurora-boreal, fundo-aurora): Fundo de aurora: manchas de luz desfocadas que se movem devagar atrás do conteúdo. Só CSS, leve. Parâmetros: `data-vm-colors` (string, padrão ""), `data-vm-speed` (time, padrão 18), `data-vm-intensity` (number, padrão 0.55). Exemplo: `

Seu título aqui

` - `data-vm="particles"` (apelidos: particulas, partículas, constelacao): Partículas flutuando no fundo, ligadas por linhas quando estão perto (constelação). O cursor afasta as partículas. Parâmetros: `data-vm-count` (number, padrão 70), `data-vm-links` (boolean, padrão true), `data-vm-color` (color, padrão ""), `data-vm-speed` (number, padrão 0.3). Exemplo: `

Seu título aqui

` - `data-vm="dot-grid"` (apelidos: grade-de-pontos, pontos, dotGrid): Grade de pontos no fundo que acende e cresce em volta do cursor, como uma lanterna. Parâmetros: `data-vm-gap` (number, padrão 26), `data-vm-radius` (number, padrão 160), `data-vm-color` (color, padrão ""). Exemplo: `

Seu título aqui

` - `data-vm="grain"` (apelidos: grao, grão, ruido, film-grain): Grão de filme animado por cima da seção (textura de cinema). Só CSS. Parâmetros: `data-vm-opacity` (number, padrão 0.08). Exemplo: `

Seu título aqui

` - `data-vm="circular-gallery"` (apelidos: galeria-circular, carrossel-3d, circularGallery): Imagens (filhos diretos) num anel 3D que gira devagar; arraste para girar com inércia. Parâmetros: `data-vm-radius` (number, padrão 0), `data-vm-speed` (number, padrão 6), `data-vm-tilt` (number, padrão -8). Exemplo: `
` - `data-vm="dock"` (apelidos: doca, dock-magnify): Barra de ícones que amplia o item sob o cursor e os vizinhos, como o Dock do macOS. Parâmetros: `data-vm-magnify` (number, padrão 1.45), `data-vm-range` (number, padrão 150). Exemplo: `` - `data-vm="click-spark"` (apelidos: faisca, faísca, clickSpark): Faíscas saem do ponto do clique dentro do elemento (ou na página toda, se colocado no ). Parâmetros: `data-vm-count` (number, padrão 8), `data-vm-size` (number, padrão 12), `data-vm-color` (color, padrão ""). Exemplo: `` - `data-vm="image-trail"` (apelidos: rastro-de-imagens, imageTrail): Ao mover o cursor sobre a área, imagens (de data-vm-images, separadas por |, ou das filhas escondidas) vão aparecendo e sumindo no rastro. Parâmetros: `data-vm-images` (string, padrão ""), `data-vm-distance` (number, padrão 120), `data-vm-size` (number, padrão 200). Exemplo: `

Passe o mouse

` - `data-vm="spotlight"` (apelidos: holofote, spotlight-card): Um holofote de luz suave segue o cursor dentro do cartão (borda e fundo acendem perto do mouse). Parâmetros: `data-vm-size` (number, padrão 320), `data-vm-color` (color, padrão ""). Exemplo: `

Suporte humano

Gente de verdade responde em minutos.

` - `data-vm="star-border"` (apelidos: borda-estrela, starBorder): Uma luz percorre a borda do botão ou cartão continuamente, como um cometa. Parâmetros: `data-vm-speed` (time, padrão 5), `data-vm-color` (color, padrão ""). Exemplo: `Começar` - `data-vm="border-glow"` (apelidos: borda-brilhante, borderGlow): A borda do cartão acende no trecho mais perto do cursor (luz que segue o mouse pela borda). Parâmetros: `data-vm-size` (number, padrão 260), `data-vm-color` (color, padrão ""). Exemplo: `

Plano Empresa

Equipe, permissões e vários CNPJs.

` - `data-vm="glare-hover"` (apelidos: reflexo, glareHover): Um reflexo de luz atravessa o elemento na diagonal quando o mouse entra. Parâmetros: `data-vm-duration` (time, padrão 0.8), `data-vm-opacity` (number, padrão 0.35). Exemplo: `
` - `data-vm="gradual-blur"` (apelidos: desfoque-gradual, gradualBlur, edge-blur): Desfoque progressivo na borda da área (o conteúdo some suavemente ao rolar por baixo), como nos apps da Apple. Parâmetros: `data-vm-position` (enum: bottom|top, padrão "bottom"), `data-vm-height` (length, padrão "7rem"), `data-vm-strength` (number, padrão 8). Exemplo: `

Texto longo que rola por baixo de um desfoque suave na borda inferior. Continue lendo e veja o conteúdo sumir com elegância, sem corte seco.

Funciona bem em listas, chats, termos de uso e qualquer área com rolagem própria.

A borda pode ficar em cima ou em baixo.

` - `data-vm="logo-loop"` (apelidos: faixa-de-logos, logoLoop, logos): Faixa infinita de logos com as pontas esmaecidas; pausa (e fica mais lenta) com o mouse em cima. Parâmetros: `data-vm-speed` (number, padrão 40), `data-vm-direction` (enum: left|right, padrão "left"), `data-vm-gap` (length, padrão 56), `data-vm-fade` (boolean, padrão true). Exemplo: `
AuroraLitoralCasa AltaPedra AzulNorte Sul
` - `data-vm="target-cursor"` (apelidos: cursor-mira, targetCursor): Cursor de mira: quatro cantos giram devagar e, sobre links e botões, se encaixam em volta do elemento. Coloque no . Parâmetros: `data-vm-selector` (selector, padrão "a, button, [data-vm-target]"). Exemplo: `` - `data-vm="blob-cursor"` (apelidos: cursor-gota, blobCursor): Gotas líquidas seguem o cursor e se fundem (efeito gooey). Parâmetros: `data-vm-color` (color, padrão ""), `data-vm-size` (number, padrão 54). Exemplo: `

Passe o mouse

` - `data-vm="magnet-lines"` (apelidos: linhas-ima, magnetLines): Grade de tracinhos que giram para apontar para o cursor, como limalha perto de um ímã. Parâmetros: `data-vm-rows` (number, padrão 9), `data-vm-columns` (number, padrão 9), `data-vm-color` (color, padrão ""). Exemplo: `
` - `data-vm="pixel-transition"` (apelidos: transicao-pixel, pixelTransition): No hover, uma grade de pixels cobre o cartão e revela o conteúdo de trás ([data-vm-back]). Parâmetros: `data-vm-grid` (number, padrão 12), `data-vm-duration` (time, padrão 0.45), `data-vm-color` (color, padrão ""). Exemplo: `
Ver detalhes
` - `data-vm="flowing-menu"` (apelidos: menu-fluido, flowingMenu): Menu em lista grande: no hover, uma faixa com texto e imagem corre por dentro do item, entrando pelo lado de onde o mouse veio. Parâmetros: `data-vm-speed` (number, padrão 80). Exemplo: `` - `data-vm="accordion-gallery"` (apelidos: galeria-sanfona, accordionGallery, expanding-panels): Painéis lado a lado: o que está sob o mouse (ou com foco) se abre e os outros encolhem, com legenda aparecendo. Parâmetros: `data-vm-grow` (number, padrão 4). Exemplo: `
Cortes
Barba
Tratamentos
Produtos
` - `data-vm="magic-bento"` (apelidos: bento-magico, bento, magicBento): Grade bento: cada cartão tem holofote que segue o mouse, borda que acende e uma leve inclinação. Parâmetros: `data-vm-tilt` (number, padrão 4). Exemplo: `

Agenda

Horários sem conflito.

Pagamentos

Pix e cartão.

Clientes

Histórico completo.

Relatórios

O mês numa tela.

` - `data-vm="card-swap"` (apelidos: troca-de-cartoes, cardSwap, card-stack): Pilha de cartões em perspectiva: de tempos em tempos o da frente cai e volta para o fundo. Clique avança. Parâmetros: `data-vm-interval` (time, padrão 3.2), `data-vm-offset` (number, padrão 34). Exemplo: `

Agenda

Horários sem conflito.

Pagamentos

Pix e cartão no agendamento.

Relatórios

O mês inteiro numa tela.

` - `data-vm="bounce-cards"` (apelidos: cartoes-em-leque, bounceCards, fan-cards): Cartões abertos em leque que entram quicando; no hover, o cartão sobe e os vizinhos se afastam. Parâmetros: `data-vm-spread` (number, padrão 9). Exemplo: `
` - `data-vm="masonry"` (apelidos: alvenaria, grade-masonry, pinterest): Grade estilo Pinterest (colunas de alturas diferentes) que se monta com entrada em cascata e se reorganiza animando quando a largura muda. Parâmetros: `data-vm-columns` (number, padrão 0), `data-vm-gap` (number, padrão 14), `data-vm-min-width` (number, padrão 240). Exemplo: `
` - `data-vm="dome-gallery"` (apelidos: galeria-cupula, domeGallery, sphere-gallery): Imagens montadas por dentro de uma cúpula 3D; arraste para girar com inércia (exposição imersiva). Parâmetros: `data-vm-radius` (number, padrão 560), `data-vm-columns` (number, padrão 12). Exemplo: `
` - `data-vm="orbit-images"` (apelidos: imagens-em-orbita, orbitImages, orbit): Imagens orbitando em elipse ao redor do conteúdo central, com profundidade (as de trás ficam menores e apagadas). Parâmetros: `data-vm-speed` (time, padrão 26), `data-vm-rx` (number, padrão 0.38), `data-vm-ry` (number, padrão 0.14). Exemplo: `

Nossos clientes

` - `data-vm="pill-nav"` (apelidos: menu-pilula, pillNav): Menu com uma pílula de fundo que desliza até o item sob o mouse e volta para o item ativo ([aria-current] ou .is-active). Parâmetros: nenhum. Exemplo: `` - `data-vm="elastic-slider"` (apelidos: controle-elastico, elasticSlider): Controle deslizante (input range) com elástico: puxado além das pontas, estica e volta com mola. Mantém o nativo, acessível. Parâmetros: `data-vm-stretch` (number, padrão 0.12). Exemplo: `` - `data-vm="animated-list"` (apelidos: lista-animada, animatedList): Lista com rolagem própria: itens entram em cascata e crescem levemente ao ficar no centro; setas do teclado navegam. Parâmetros: `data-vm-height` (length, padrão "420px"). Exemplo: `
  • Ana Souza, corte 14h
  • Bruno Lima, barba 14h30
  • Carla Dias, coloração 15h
  • Diego Reis, corte 16h
  • Eva Matos, escova 16h30
  • Felipe Alves, corte 17h
` - `data-vm="electric-border"` (apelidos: borda-eletrica, electricBorder): Borda elétrica: um contorno de energia trêmulo e brilhante em volta do cartão (turbulência em SVG animada). Parâmetros: `data-vm-color` (color, padrão ""), `data-vm-intensity` (number, padrão 1). Exemplo: `

Plano Turbo

Tudo ilimitado, com prioridade.

` - `data-vm="sticker-peel"` (apelidos: adesivo, stickerPeel): Adesivo (imagem ou selo) que descola pelo canto no hover, mostrando o verso, e volta ao sair. Parâmetros: `data-vm-peel` (number, padrão 0.32). Exemplo: `
` - `data-vm="chroma-grid"` (apelidos: grade-cromatica, chromaGrid, reveal-color): Grade de fotos em preto e branco: em volta do cursor elas ganham cor, como uma lanterna de cor. Parâmetros: `data-vm-radius` (number, padrão 280). Exemplo: `
` - `data-vm="pixel-trail"` (apelidos: rastro-de-pixels, pixelTrail): Ao mover o cursor, uma trilha de pixels acende na grade e apaga devagar (estética digital). Parâmetros: `data-vm-size` (number, padrão 22), `data-vm-fade` (time, padrão 0.6). Exemplo: `

Passe o mouse

` - `data-vm="glow-cursor"` (apelidos: luz-do-cursor, glowCursor, cursor-light): Uma luz macia e grande segue o cursor por trás do conteúdo da seção (iluminação ambiente). Parâmetros: `data-vm-size` (number, padrão 520), `data-vm-opacity` (number, padrão 0.22). Exemplo: `

Luz que acompanha

` - `data-vm="crosshair"` (apelidos: mira-cruzada, crosshair-cursor): Linhas finas horizontal e vertical cruzam a área no ponto do cursor, com as coordenadas ao lado (estética técnica/editorial). Parâmetros: `data-vm-coords` (boolean, padrão true). Exemplo: `

Precisão

` - `data-vm="cubes"` (apelidos: cubos, cubos-3d): Grade de cubos 3D que giram e acendem quando o cursor passa por perto, voltando devagar ao lugar. Parâmetros: `data-vm-grid` (number, padrão 8), `data-vm-radius` (number, padrão 2.2). Exemplo: `
` - `data-vm="metaballs"` (apelidos: gotas-metalicas, meta-balls, blobs): Bolhas que flutuam e se fundem como lava (gooey), atrás do conteúdo; uma delas segue o cursor. Parâmetros: `data-vm-count` (number, padrão 6), `data-vm-color` (color, padrão ""). Exemplo: `

Fluido

` - `data-vm="swipe-stack"` (apelidos: baralho, pilha-arrastavel, tinder-stack, stack): Baralho de cartões: arraste o de cima para o lado (ou use as setas) e ele voa, revelando o próximo; o último volta para o fundo. Parâmetros: `data-vm-rotate` (number, padrão 8). Exemplo: `
` - `data-vm="folder"` (apelidos: pasta, folder-open): Pasta de arquivo: no hover/clique ela abre e as folhas de dentro (filhos) sobem em leque. Ótimo para portfólio e documentos. Parâmetros: `data-vm-color` (color, padrão ""). Exemplo: `
` - `data-vm="holo-card"` (apelidos: cartao-holografico, holoCard, profile-card): Cartão holográfico (como carta colecionável): inclina em 3D e ganha reflexo furta-cor e brilho que seguem o cursor. Parâmetros: `data-vm-max` (number, padrão 14). Exemplo: `

Ana Souza

Barbeira desde 2014

` - `data-vm="glass-card"` (apelidos: cartao-de-vidro, glassCard, glass-surface, fluid-glass): Cartão de vidro fosco com borda de luz, reflexo que segue o cursor e leve distorção do fundo (bom sobre fotos e fundos animados). Parâmetros: `data-vm-blur` (number, padrão 18). Exemplo: `

Vidro

Fica lindo em cima de fotos e fundos animados.

` - `data-vm="stepper"` (apelidos: passo-a-passo, etapas, wizard): Passo a passo com indicador animado: os filhos são as etapas; botões Voltar/Continuar com transição deslizante e barra de progresso. Acessível pelo teclado. Parâmetros: `data-vm-next` (string, padrão "Continuar"), `data-vm-back` (string, padrão "Voltar"), `data-vm-done` (string, padrão "Concluir"). Exemplo: `

Escolha o serviço

Corte, barba ou os dois.

Escolha o horário

Hoje às 15h ou amanhã às 10h.

Confirme

Pronto, enviamos um lembrete.

` - `data-vm="staggered-menu"` (apelidos: menu-cascata, menu-tela-cheia, staggeredMenu, fullscreen-menu): Botão de menu que abre um painel de tela cheia: camadas de cor deslizam e os links entram em cascata; Esc fecha. Use num