Inclua o CSS e o JS
<link rel="stylesheet" href="vatse-motion.css">
<script src="vatse-motion.full.min.js" defer></script>Ou só o núcleo (34 KB gzip) e os módulos que usar: componentes e fundos.
VATSE MOTION · PARTE DO SMART UI
A página vira um filme.
Animação de nível profissional com um atributo no HTML. Entradas, rolagem cinematográfica, texto, interação, 222 presets prontos e fundos em WebGL, com nomes em inglês e português.
<h2 data-vm="text-reveal">Simples por fora.</h2>
<div data-vm="magic-bento">...</div>
<section data-vm="silk" data-vm-colors="#ef650f, #0a0a0a">...</section>222presets prontos
24fundos em WebGL
12templates completos
2idiomas nos nomes e valores
Três linhas e está no ar.
Marque o HTML
<h1 data-vm="text-reveal">Olá</h1>
<h1 data-vm="revelar-texto">Olá</h1>Nomes e valores em inglês ou português. Parâmetros com data-vm-*.
Confira
vatse-motion check pagina.htmlO verificador que vem no pacote aponta preset errado, parâmetro inexistente e módulo faltando, com sugestão.
Todos os presets, com exemplo vivo.
Clique num preset para abrir o playground nele, mudar os parâmetros e copiar o código.
Entradasnúcleo
fadeAparece suavemente (só opacidade).aparecer · fade-inEntradasnúcleofade-upAparece deslizando de baixo para cima.subir · fadeUpEntradasnúcleofade-downAparece deslizando de cima para baixo.descer · fadeDownEntradasnúcleofade-leftAparece deslizando da direita para a esquerda.da-direita · fadeLeftEntradasnúcleofade-rightAparece deslizando da esquerda para a direita.da-esquerda · fadeRightEntradasnúcleozoom-inAparece crescendo de um tamanho menor.ampliar · zoomIn · scale-inEntradasnúcleozoom-outAparece encolhendo de um tamanho maior.reduzir · zoomOutEntradasnúcleoblur-inAparece saindo do desfoque, com leve subida.desfocar · blurInEntradasnúcleorotate-inAparece girando levemente.girar · rotateInEntradasnúcleoflip-upAparece virando em 3D, como uma carta levantando.virar · flipUpEntradasnúcleoskew-upSobe com inclinação que se desfaz, sensação de velocidade.inclinar · skewUpEntradasnúcleoclip-upRevela com uma máscara que se abre de baixo para cima. Ótimo para imagens.revelar-cima · clipUpEntradasnúcleoclip-downRevela com uma máscara que se abre de cima para baixo. Ótimo para imagens.revelar-baixo · clipDownEntradasnúcleoclip-leftRevela com uma máscara que se abre da direita para a esquerda. Ótimo para imagens.revelar-esquerda · clipLeftEntradasnúcleoclip-rightRevela com uma máscara que se abre da esquerda para a direita. Ótimo para imagens.revelar-direita · clipRightEntradasnúcleoimage-revealA moldura se abre enquanto a foto desfaz um zoom por dentro (efeito de revista).revelar-imagem · imageRevealEntradasnúcleocurtainUma faixa de cor passa por cima e revela o conteúdo (transição de cinema).cortinaGruposnúcleostaggerAnima os filhos diretos um depois do outro com o efeito escolhido.cascata · em-sequenciaGruposnúcleogrid-waveOs itens de uma grade aparecem em onda, a partir do centro ou de um canto.onda · gridWaveTextonúcleotext-revealO texto sobe de dentro de uma máscara, por linha, palavra ou letra (título de cinema).texto-revelar · textReveal · split-revealTextonúcleotext-fadeAs letras surgem uma a uma com leve desfoque.texto-surgir · textFadeTextonúcleoscroll-textParágrafo que vai "acendendo" palavra por palavra conforme a página rola.texto-rolagem · scrollText · text-scrubTextonúcleoscrambleO texto aparece embaralhado e se revela letra a letra (estilo terminal/hacker).embaralhar · text-scrambleTextonúcleotypewriterDigita o texto como uma máquina de escrever, com cursor piscando.maquina-de-escrever · digitarTextonúcleocounterConta do zero até o número escrito no elemento (formatação local, ex.: 1.250).contador · count-upTextonúcleohighlightUm marca-texto ou sublinhado se desenha por trás da palavra.marca-texto · grifarRolagemnúcleoparallaxO elemento rola numa velocidade diferente da página, criando profundidade.paralaxe · profundidadeRolagemnúcleoscrubAnima de um estado para outro presa à rolagem. Use data-vm-from e data-vm-to com propriedades (ex.: "x:-200; rotate:-10; opacity:0").rolagem · scroll-scrubRolagemnúcleoscale-on-scrollA imagem cresce (ou abre de cartão para tela cheia) enquanto você rola.zoom-rolagem · scaleOnScrollRolagemnúcleoprogressBarra que enche conforme a leitura da página (ou de uma seção com data-vm-target).barra-de-progresso · reading-progressRolagemnúcleopin-sceneA 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.cena-fixa · cena · pinSceneRolagemnúcleohorizontalA seção fica parada e o trilho interno ([data-vm-track] ou o primeiro filho) anda para o lado conforme você rola.trilho-horizontal · horizontal-scrollRolagemnúcleosequenceToca uma sequência de imagens (quadros de vídeo) presa à rolagem num <canvas>, como nas páginas de produto da Apple.sequencia-de-imagens · image-sequence · framesRolagemnúcleobg-colorQuando 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).cor-de-fundo · theme-switchRolagemnúcleovelocity-skewOs elementos inclinam conforme a velocidade da rolagem e voltam ao parar (sensação de inércia).inclinar-na-rolagem · velocitySkewRolagemnúcleomarqueeFaixa que rola sem fim (logos, palavras). Acelera e inverte com a rolagem da página.letreiro · tickerSVGnúcleodrawDesenha o traço de um SVG (path, line, circle...). Com data-vm-scrub="true" o traço acompanha a rolagem.desenhar · svg-drawInteraçãonúcleomagneticO botão é atraído pelo cursor quando ele chega perto.magnetico · imaInteraçãonúcleotiltO cartão inclina em 3D seguindo o cursor. Expõe --vm-glare-x/--vm-glare-y para um brilho em CSS.inclinacao-3d · tilt-3dInteraçãonúcleofollowO elemento segue o cursor dentro da área do pai (ex.: foto que aparece sobre uma lista).seguir-cursor · hover-imageInteraçãonúcleofloatO 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.flutuar · flutuante · floatingInteraçãonúcleocursorLiga o cursor próprio (ponto + anel). Coloque no <body>. Use data-vm-cursor="Ver" nos elementos para mostrar um texto no anel.cursor-proprioExperiênciasnúcleozoom-galleryGaleria 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.galeria-zoom · entrar-na-galeria · zoomGalleryExperiênciasnúcleodepth-galleryTú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).tunel · túnel · galeria-profundidadeExperiênciasnúcleostack-cardsCartões (filhos diretos) que grudam no topo e se empilham: cada um encolhe e escurece atrás do próximo que chega.pilha · empilhar · cartoes-empilhadosExperiênciasnúcleoexpandA 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.expandir · abrir-tela-cheia · expand-mediaExperiênciasnúcleocard-expandAo 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.cartao-expande · abrir-cartao · cardExpandExperiênciasnúcleomorph-linkLink 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).link-que-vira-pagina · morphLink · shared-elementExperiênciasnúcleomorph-targetElemento 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.destino-do-link · morphTargetExperiênciasnúcleodrag-sliderTrilho 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.carrossel-arrastar · arrastar · dragSliderExperiênciasnúcleosplit-screenDuas colunas (filhos diretos) dentro de uma seção parada: a da esquerda sobe e a da direita desce enquanto você rola.tela-dividida · splitScreen · opposite-scrollExperiênciasnúcleovideo-scrubO 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.video-na-rolagem · videoScrubComponentescomponentesshiny-textUm brilho atravessa o texto de tempos em tempos (como reflexo em metal).texto-brilhante · brilho · shinyTextComponentescomponentesgradient-textTexto preenchido por um degradê que flui continuamente.texto-degrade · degrade · gradientTextComponentescomponentesglitch-textEfeito de falha digital: duas cópias deslocadas em cores tremem por cima do texto. Pode ficar só no hover.texto-falha · glitch · glitchTextComponentescomponentesdecrypt-textO texto aparece decodificando (letras aleatórias que assentam da esquerda para a direita). Ao aparecer na tela ou ao passar o mouse.decodificar · texto-decodifica · decryptTextComponentescomponentesrotating-textTroca palavras em sequência no mesmo lugar (ex.: "feito para barbearias / clínicas / academias"). As palavras ficam nos filhos <span> ou em data-vm-words separadas por |.palavras-que-giram · texto-rotativo · rotatingTextComponentescomponentescircular-textTexto distribuído num círculo que gira devagar (selo, carimbo). Acelera com o mouse em cima.texto-circular · circularTextComponentescomponentesproximity-textCada letra fica mais pesada e maior conforme o cursor se aproxima (fonte variável funciona melhor; sem ela, usa escala).texto-proximidade · variable-proximity · proximityTextComponentescomponentesauroraFundo de aurora: manchas de luz desfocadas que se movem devagar atrás do conteúdo. Só CSS, leve.aurora-boreal · fundo-auroraComponentescomponentesparticlesPartículas flutuando no fundo, ligadas por linhas quando estão perto (constelação). O cursor afasta as partículas.particulas · partículas · constelacaoComponentescomponentesdot-gridGrade de pontos no fundo que acende e cresce em volta do cursor, como uma lanterna.grade-de-pontos · pontos · dotGridComponentescomponentesgrainGrão de filme animado por cima da seção (textura de cinema). Só CSS.grao · grão · ruidoComponentescomponentescircular-galleryImagens (filhos diretos) num anel 3D que gira devagar; arraste para girar com inércia.galeria-circular · carrossel-3d · circularGalleryComponentescomponentesdockBarra de ícones que amplia o item sob o cursor e os vizinhos, como o Dock do macOS.doca · dock-magnifyComponentescomponentesclick-sparkFaíscas saem do ponto do clique dentro do elemento (ou na página toda, se colocado no <body>).faisca · faísca · clickSparkComponentescomponentesimage-trailAo mover o cursor sobre a área, imagens (de data-vm-images, separadas por |, ou das <img> filhas escondidas) vão aparecendo e sumindo no rastro.rastro-de-imagens · imageTrailComponentescomponentesspotlightUm holofote de luz suave segue o cursor dentro do cartão (borda e fundo acendem perto do mouse).holofote · spotlight-cardTextocomponentessplit-flapLetreiro de aeroporto: cada letra gira por caracteres até parar na certa, da esquerda para a direita.letreiro-aeroporto · flap · splitFlapTextocomponentesscroll-floatAs letras sobem esticadas e assentam conforme a página rola (presas à rolagem).letras-flutuam · scrollFloatTextocomponentestrue-focusUma palavra por vez fica nítida e emoldurada por cantos; as outras ficam desfocadas. O foco passeia sozinho ou segue o mouse.foco · trueFocusTextocomponentescurved-loopUma faixa de texto corre sem fim ao longo de uma curva suave. A rolagem acelera; dá para arrastar.texto-em-curva · curvedLoop · texto-curvoTextocomponentesstroke-textO contorno das letras é desenhado como caneta e depois o preenchimento aparece.texto-contorno · contorno · strokeTextComponentescomponentesstar-borderUma luz percorre a borda do botão ou cartão continuamente, como um cometa.borda-estrela · starBorderComponentescomponentesborder-glowA borda do cartão acende no trecho mais perto do cursor (luz que segue o mouse pela borda).borda-brilhante · borderGlowComponentescomponentesglare-hoverUm reflexo de luz atravessa o elemento na diagonal quando o mouse entra.reflexo · glareHoverComponentescomponentesgradual-blurDesfoque progressivo na borda da área (o conteúdo some suavemente ao rolar por baixo), como nos apps da Apple.desfoque-gradual · gradualBlur · edge-blurComponentescomponenteslogo-loopFaixa infinita de logos com as pontas esmaecidas; pausa (e fica mais lenta) com o mouse em cima.faixa-de-logos · logoLoop · logosComponentescomponentestarget-cursorCursor de mira: quatro cantos giram devagar e, sobre links e botões, se encaixam em volta do elemento. Coloque no <body>.cursor-mira · targetCursorComponentescomponentesblob-cursorGotas líquidas seguem o cursor e se fundem (efeito gooey).cursor-gota · blobCursorComponentescomponentesmagnet-linesGrade de tracinhos que giram para apontar para o cursor, como limalha perto de um ímã.linhas-ima · magnetLinesComponentescomponentespixel-transitionNo hover, uma grade de pixels cobre o cartão e revela o conteúdo de trás ([data-vm-back]).transicao-pixel · pixelTransitionComponentescomponentesflowing-menuMenu em lista grande: no hover, uma faixa com texto e imagem corre por dentro do item, entrando pelo lado de onde o mouse veio.menu-fluido · flowingMenuComponentescomponentesaccordion-galleryPainéis lado a lado: o que está sob o mouse (ou com foco) se abre e os outros encolhem, com legenda aparecendo.galeria-sanfona · accordionGallery · expanding-panelsComponentescomponentesmagic-bentoGrade bento: cada cartão tem holofote que segue o mouse, borda que acende e uma leve inclinação.bento-magico · bento · magicBentoComponentescomponentescard-swapPilha de cartões em perspectiva: de tempos em tempos o da frente cai e volta para o fundo. Clique avança.troca-de-cartoes · cardSwap · card-stackComponentescomponentesbounce-cardsCartões abertos em leque que entram quicando; no hover, o cartão sobe e os vizinhos se afastam.cartoes-em-leque · bounceCards · fan-cardsComponentescomponentesmasonryGrade estilo Pinterest (colunas de alturas diferentes) que se monta com entrada em cascata e se reorganiza animando quando a largura muda.alvenaria · grade-masonry · pinterestComponentescomponentesdome-galleryImagens montadas por dentro de uma cúpula 3D; arraste para girar com inércia (exposição imersiva).galeria-cupula · domeGallery · sphere-galleryComponentescomponentesorbit-imagesImagens orbitando em elipse ao redor do conteúdo central, com profundidade (as de trás ficam menores e apagadas).imagens-em-orbita · orbitImages · orbitComponentescomponentespill-navMenu 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).menu-pilula · pillNavComponentescomponenteselastic-sliderControle deslizante (input range) com elástico: puxado além das pontas, estica e volta com mola. Mantém o <input> nativo, acessível.controle-elastico · elasticSliderComponentescomponentesanimated-listLista com rolagem própria: itens entram em cascata e crescem levemente ao ficar no centro; setas do teclado navegam.lista-animada · animatedListTextocomponentesblur-textAs palavras (ou letras) chegam saindo do desfoque, em cascata, com leve subida. Elegante para títulos de abertura.texto-desfocado · blurTextTextocomponentesshuffle-textNo hover (e ao aparecer), as letras trocam por símbolos e voltam ao lugar uma a uma, da esquerda para a direita.embaralhar-hover · shuffleTextocomponenteswave-textUma onda suave percorre as letras continuamente (ou só no hover). Bom para chamadas curtas e selos.texto-onda · waveTextTextocomponentesfalling-textAo 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.texto-cai · fallingText · gravity-textTextocomponentesecho-textCópias do título em camadas, deslocadas e cada vez mais apagadas, que acompanham o cursor (efeito de profundidade e eco).texto-eco · echoTextTextocomponentesmasked-textA imagem (ou degradê animado) aparece dentro das letras e desliza devagar. Use em títulos grandes e grossos.texto-com-imagem · image-text · maskedTextTextocomponentesodometerNú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.odometro · contador-rolante · rolling-numberTextocomponentestext-pressureTí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.pressao-de-texto · textPressureComponentescomponenteselectric-borderBorda elétrica: um contorno de energia trêmulo e brilhante em volta do cartão (turbulência em SVG animada).borda-eletrica · electricBorderComponentescomponentessticker-peelAdesivo (imagem ou selo) que descola pelo canto no hover, mostrando o verso, e volta ao sair.adesivo · stickerPeelComponentescomponenteschroma-gridGrade de fotos em preto e branco: em volta do cursor elas ganham cor, como uma lanterna de cor.grade-cromatica · chromaGrid · reveal-colorComponentescomponentespixel-trailAo mover o cursor, uma trilha de pixels acende na grade e apaga devagar (estética digital).rastro-de-pixels · pixelTrailComponentescomponentesglow-cursorUma luz macia e grande segue o cursor por trás do conteúdo da seção (iluminação ambiente).luz-do-cursor · glowCursor · cursor-lightComponentescomponentescrosshairLinhas finas horizontal e vertical cruzam a área no ponto do cursor, com as coordenadas ao lado (estética técnica/editorial).mira-cruzada · crosshair-cursorComponentescomponentescubesGrade de cubos 3D que giram e acendem quando o cursor passa por perto, voltando devagar ao lugar.cubos · cubos-3dComponentescomponentesmetaballsBolhas que flutuam e se fundem como lava (gooey), atrás do conteúdo; uma delas segue o cursor.gotas-metalicas · meta-balls · blobsComponentescomponentesswipe-stackBaralho 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.baralho · pilha-arrastavel · tinder-stackComponentescomponentesfolderPasta de arquivo: no hover/clique ela abre e as folhas de dentro (filhos) sobem em leque. Ótimo para portfólio e documentos.pasta · folder-openComponentescomponentesholo-cardCartão holográfico (como carta colecionável): inclina em 3D e ganha reflexo furta-cor e brilho que seguem o cursor.cartao-holografico · holoCard · profile-cardComponentescomponentesglass-cardCartã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).cartao-de-vidro · glassCard · glass-surfaceComponentescomponentesstepperPasso 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.passo-a-passo · etapas · wizardComponentescomponentesstaggered-menuBotão de menu que abre um painel de tela cheia: camadas de cor deslizam e os links entram em cascata; Esc fecha. Use num <nav> com links.menu-cascata · menu-tela-cheia · staggeredMenuComponentescomponentesspecular-buttonBotão premium com reflexo especular que segue o cursor, borda luminosa e leve afundamento ao clicar.botao-especular · shiny-button · specularButtonComponentescomponentescoverflowCarrossel de capas em 3D (como álbuns): a do centro em destaque e as laterais inclinadas. Arraste, use as setas ou clique numa capa.fluxo-de-capas · carousel-3d · coverFlowTextocomponentesfuzzy-textTexto 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).texto-difuso · fuzzyText · texto-tremidoTextocomponentescountdownContagem 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.contagem-regressiva · cronometro · timerComponentescomponentesgooey-navNavegação com pílula líquida: ao clicar, a pílula escorre até o item e solta gotas que se fundem (filtro gooey). Use num <nav> com links.nav-gosmenta · gooeyNav · nav-liquidaComponentescomponentesbubble-menuBotão redondo que abre o menu em bolhas grandes coloridas, que pulam com mola e se inclinam de leve. Esc ou clicar fora fecha. Use num <nav> com links.menu-bolhas · bubbleMenuComponentescomponentescard-navBarra de navegação que se expande em cartões: o botão abre a barra para baixo e cada grupo de links vira um cartão que sobe em cascata. Filhos: [data-vm-brand] e grupos <div> com título e links.nav-de-cartoes · cardNavComponentescomponentesanimated-tabsAbas com indicador que desliza até a aba escolhida e conteúdo que troca com fade e ajuste de altura. Botões [data-vm-tab] e painéis [data-vm-panel] na mesma ordem. Setas do teclado navegam.abas-animadas · abas · tabsComponentescomponentesinfinite-scrollColuna de itens que rola sozinha sem fim (e com a roda ou arrastando), com bordas que somem e leve inclinação 3D opcional. Bom para depoimentos, feeds e recursos.rolagem-infinita · lista-infinita · infiniteScrollComponentescomponentesdecay-cardCartão com foto que se deforma como água quando o cursor passa rápido e volta ao normal quando para (deslocamento em SVG).cartao-deformado · decayCardComponentescomponentesreveal-lensDuas imagens empilhadas: o cursor vira uma lente redonda que revela a segunda (antes e depois, dia e noite, rascunho e final).lente-revela · lente · image-lensComponentescomponentesbeam-connectLiga vários elementos [data-vm-node] a um central [data-vm-hub] com curvas finas e pulsos de luz viajando por elas (ótimo para integrações e fluxos).feixe-conectado · conexoes · animated-beamComponentescomponentesdot-globeGlobo 3D feito de pontos girando devagar, com cidades pulsando na cor do tema. Arraste para girar. Ótimo para alcance, regiões e presença.globo-de-pontos · globo · globeComponentescomponentesconfettiChuva de confete saindo do elemento ao clicar (ou ao aparecer), com física e cores do tema. Bom para "pedido confirmado" e "assinatura feita".confete · celebrarComponentescomponentesribbonsFitas coloridas que seguem o cursor com atraso e mola, desenhando curvas suaves pela seção.fitas · fitas-do-cursor · cursor-ribbonsFundoscomponentesletter-glitchFundo de letras e símbolos numa grade que trocam e mudam de cor sem parar, com vinheta nas bordas (estética hacker/dados).letras-glitch · matriz-de-letras · letterGlitchFundoscomponentessquaresGrade de quadrados que desliza na diagonal; o quadrado sob o cursor acende. Fundo discreto para seções técnicas.quadrados · grade-de-quadrados · squares-bgFundoscomponentesmeteorsMeteoros finos riscando a seção na diagonal, com rastro que some. CSS puro e leve.meteoros · estrelas-cadentesFundoscomponentesretro-gridChão de grade em perspectiva correndo em direção ao horizonte (synthwave), com brilho no fim. CSS puro.grade-retro · grade-perspectiva · retroGridFundoscomponentesripple-ringsAnéis concêntricos que pulsam do centro para fora, como ondas numa poça (ótimo atrás de um ícone ou logo).ondas-circulares · aneis · ripple-bgSVGcomponentesmotion-pathUm 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.trajetoria · caminho · seguir-caminhoSVGcomponentesmorph-shapeUm 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.morfar-forma · transformar-forma · morphSVGExperiênciascomponentespreloaderTela 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.carregamento · tela-de-abertura · loaderExperiênciascomponentespage-transitionAo 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.transicao-de-pagina · troca-de-pagina · pageTransitionInteraçãocomponentesbutton-fxEfeitos 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).botao-efeito · efeito-de-botao · buttonHoverInteraçãocomponenteslink-underlineSublinhado 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.sublinhado · sublinhado-animado · underlineInteraçãocomponenteshamburgerBotã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.menu-hamburguer · botao-menu · menu-toggleInteraçãocomponentestoggle-switchTransforma um checkbox numa chave liga/desliga com mola e brilho. O input continua lá (teclado, formulário e leitor de tela funcionam igual).chave · interruptor · switchComponentescomponentesprogress-ringAnel que se preenche até o valor quando aparece, com o número contando no centro. O valor vem do texto do elemento (ex.: 87) ou de data-vm-value.anel-de-progresso · grafico-circular · radial-progressComponentescomponentesskeletonEnquanto as imagens de dentro carregam, um brilho de carregamento ocupa o lugar; quando chegam, entram com um esmaecer. Evita o "pulo" de imagem aparecendo aos pedaços.esqueleto · carregando-imagem · shimmerInteraçãocomponentesrippleOnda que se espalha a partir do ponto do toque ou clique (como no Material), na cor do texto do elemento.onda-de-toque · ondulacao · inkInteraçãocomponentesmouse-parallaxAs 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.paralaxe-do-mouse · camadas-com-mouse · mouseParallaxComponentescomponentesimage-distortAo passar o mouse, a imagem ondula como líquido e assenta de novo (filtro de deslocamento do SVG, sem WebGL). Também serve para vídeo e fundos.distorcer-imagem · imagem-liquida · liquid-hoverEntradascomponentestile-revealA 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.revelar-em-blocos · mosaico · tilesTextocomponentestext-rollNo hover, cada letra rola para cima e é substituída por uma cópia vinda de baixo, em cascata. Para menus e links curtos.rolar-letras · letras-rolando · textRollGruposcomponenteslist-revealLista (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.lista-revelada · lista-com-linhas · table-revealGruposcomponentesdeal-cardsOs 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.distribuir-cartas · cartas-do-monte · dealCardsGruposcomponentesstagger-3dOs 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.cascata-3d · entrada-3d · depth-staggerSVGcomponentestext-on-pathO 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.texto-na-curva · texto-em-onda · textPathSVGcomponentessketchDesenha 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.desenho-a-mao · rabisco · draw-sequenceSVGcomponenteswave-dividerBorda 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).divisoria-onda · onda-de-secao · waveDividerRolagemcomponentesstack-sectionsAs 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.secoes-empilhadas · paineis-empilhados · stacking-sectionsRolagemcomponentescircle-revealA 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).revelar-em-circulo · circulo-que-abre · irisInteraçãocomponentesfloat-labelNos campos com <label> e <input>/<textarea>/<select>, o rótulo fica dentro do campo e sobe para a borda ao focar ou preencher; uma linha de destaque cresce embaixo. Aplique num formulário ou num campo.rotulo-flutuante · label-flutuante · floating-labelInteraçãocomponentesform-feedbackValidaçã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.retorno-do-formulario · validacao-animada · form-shakeComponentescomponentesflip-cardCartão com frente e verso que vira em 3D no hover (com mouse) ou no toque/clique e no Enter. Frente e verso são os dois primeiros filhos (ou [data-vm-front] e [data-vm-back]).cartao-que-vira · virar-cartao · flipCardComponentescomponentesring-carouselOs filhos ficam num anel em 3D que gira devagar sozinho; dá para arrastar com inércia (mouse ou dedo) e usar as setas do teclado. Para depoimentos, produtos e galerias.carrossel-anel-3d · carrossel-em-anel · cylinder-carouselTextocomponentesvideo-textUm 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.video-no-texto · texto-com-video · videoTextComponentescomponentesslideshowGaleria de fotos que troca sozinha com transições de cinema: zoom suave (Ken Burns), cortina, persianas ou abertura ao meio. Setas, pontos, arraste no celular, teclado e pausa ao passar o mouse.apresentacao · galeria-com-transicao · slider-de-fotosComponentescomponenteskpi-cardCartão de indicador de painel: rótulo, número que conta até o valor, variação colorida (verde subindo, vermelho caindo; dá para inverter) e minigráfico que se desenha. Tudo por atributos.indicador · cartao-indicador · stat-cardComponentescomponentesbefore-afterCompara duas fotos (antes e depois) com um divisor arrastável. O controle é um input de faixa real (teclado e leitor de tela funcionam). Ao aparecer, o divisor balança uma vez para mostrar que se mexe.antes-e-depois · comparar-imagens · image-compareComponentescomponenteslightboxClique numa foto da galeria e ela cresce da miniatura até a tela cheia (sem salto), com legenda do alt, setas, teclado, arraste no celular e Esc para fechar. Use data-vm-full para uma versão maior da foto.ampliar-foto · galeria-tela-cheia · zoom-de-fotoRolagemcomponentestimelineLinha 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.linha-do-tempo · linha-de-etapas · historiaComponentescomponenteschat-demoConversa encenada (estilo WhatsApp): as mensagens aparecem uma a uma, com "digitando…" antes de cada resposta, quando a área entra na tela. Cada filho é uma mensagem; data-vm-from="me" marca as suas.conversa-encenada · chat-animado · whatsapp-demoInteraçãocomponentesprice-toggleChave 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.preco-mensal-anual · alternar-preco · pricing-toggleRolagemcomponentescolumns-parallaxColunas 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.colunas-em-paralaxe · colunas-opostas · parallax-columnsRolagemcomponenteszoom-through-textA 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).mergulhar-no-texto · atravessar-letra · zoom-textInteraçãocomponentescard-fanCartõ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.leque · cartas-em-leque · card-spreadInteraçãocomponentesback-to-topBotã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 <button> ou <a href="#">.voltar-ao-topo · ir-ao-topo · scroll-topTextocomponentesplaceholder-typerO placeholder do campo vai digitando e apagando exemplos (separe com |). Para buscas e formulários de cadastro. Para quando a pessoa clica ou digita.placeholder-digitado · exemplos-na-busca · typing-placeholderComponentescomponentesstar-ratingEstrelas de avaliação que se preenchem até a nota (aceita frações, ex.: 4,8) quando aparecem, com a nota contando e o total de avaliações.estrelas-de-avaliacao · avaliacao · notaComponentescomponentespulse-dotPonto com ondas que pulsam, para indicar algo ao vivo ou online (vagas abertas, atendimento disponível, sistema no ar). O texto do elemento vira o rótulo.ponto-pulsante · ao-vivo · live-dotComponentescomponentesprogress-barsBarras que se preenchem em cascata quando aparecem, com a porcentagem contando. Cada filho é uma barra: o texto é o rótulo e data-vm-value o valor (0 a 100).barras-de-progresso · barras-de-habilidade · skill-barsInteraçãocomponentesscrollspyNum 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.menu-que-segue · secao-ativa · indicador-de-secaoComponentescomponentesfaqPerguntas frequentes a partir de <details>/<summary> (funciona sem JavaScript): a resposta abre e fecha com altura suave e o ícone + vira ×. Com data-vm-single="true", abrir uma fecha as outras.perguntas-frequentes · sanfona · accordionComponentescomponentesdialogJanela modal animada a partir de um <dialog> nativo (foco preso, Esc e leitor de tela do navegador): entra com escala e o fundo desfoca. Qualquer elemento com data-vm-open="#id" abre; [data-vm-close] ou clique fora fecham.modal · janela · popupComponentescomponentesdrawerPainel que desliza da lateral (ou de baixo, no estilo de folha do celular) a partir de um <dialog> nativo. Mesmos gatilhos do dialog: data-vm-open="#id" abre, [data-vm-close], Esc ou clique fora fecham.gaveta · painel-lateral · side-sheetInteraçãocomponentestooltipBalã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.dica · balao-de-ajudaInteraçãocomponentescopy-buttonBotã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.copiar · botao-copiarInteraçãocomponentesheart-burstBotã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.curtir · like · coracaoInteraçãocomponentessearch-expandBusca recolhida num ícone de lupa que se expande num campo ao clicar (e recolhe com Esc ou ao sair vazia). Envolva um <input type="search">; com <form>, o envio continua normal.busca-expansivel · lupaInteraçãocomponentesdropdownMenu 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.menu-suspenso · lista-suspensaComponentescomponentescookie-bannerAviso de cookies (LGPD) que sobe do rodapé depois de um instante e some ao escolher. Botões [data-vm-accept] e [data-vm-reject]; a escolha fica guardada no navegador e dispara o evento vm:consent (detail.accepted) para você ligar ou não as tags de medição.aviso-de-cookies · lgpd · consentimentoComponentescomponentesform-stepsFormulário em etapas: cada [data-vm-step] vira uma tela, com barra de progresso e contador. [data-vm-next] avança só se os campos obrigatórios da etapa estiverem válidos (o navegador mostra o erro); [data-vm-prev] volta. O último passo envia o <form> normalmente.formulario-em-etapas · multi-step · etapas-do-formularioInteraçãocomponentesotp-inputCó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 <input> original (com name) recebe o valor e vai no envio do formulário.codigo-de-verificacao · codigo-sms · pin-inputInteraçãocomponentespassword-meterMedidor 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.forca-da-senha · senha-forteInteraçãocomponentesdropzoneÁ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 <input type="file"> original, então o formulário envia normalmente.enviar-arquivos · area-de-upload · arrastar-arquivosInteraçãocomponentesfly-to-cartNo 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 <img> do cartão mais próximo com [data-vm-item]. Dispara vm:add com o total.voar-para-o-carrinho · adicionar-ao-carrinhoInteraçãocomponentesquantitySeletor de quantidade com botões − e + em volta de um <input type="number">: 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).quantidade · seletor-de-quantidade · qtyRolagemcomponentessticky-barBarra 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.barra-fixa · barra-de-compra · sticky-ctaComponentescomponentesavatar-stackFotos de clientes sobrepostas que entram uma a uma e se afastam no hover, com uma bolha "+N" no fim (data-vm-more). Prova social compacta para o topo da página ou ao lado do botão.rostos-empilhados · avatares · avatar-groupComponentescomponentestoast-stackAvisos que entram pelo canto, empilham (no máximo 4), pausam com o mouse em cima e somem sozinhos com uma barra de tempo. Qualquer elemento com data-vm-toast="texto" mostra um ao clicar; por código, VatseMotion.toast({ text, type }) ou o evento vm:toast. Tipos: info, success, warning, error.avisos-empilhados · notificacoes · toastFundosfundossilkSeda em movimento: dobras suaves de tecido com brilho, na cor do tema. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.seda · bg-silkFundosfundosplasmaPlasma: ondas de cor que se misturam continuamente. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.plasma-fluido · bg-plasmaFundosfundosiridescencePelícula furta-cor (bolha de sabão, holograma) que muda com o tempo e o cursor. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.iridescente · furta-cor · bg-iridescenceFundosfundosliquid-chromeMetal líquido cromado com reflexos ondulando (o cursor deforma). WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.cromo-liquido · metal-liquido · bg-liquid-chromeFundosfundoslight-raysRaios de luz caindo do alto, como sol entrando por uma janela, com poeira sutil. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.raios-de-luz · feixes-de-luz · bg-light-raysFundosfundosgradient-wavesFaixas de degradê ondulando lentamente (fundo de produto, calmo e elegante). WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.ondas-degrade · ondas · bg-gradient-wavesFundosfundosgalaxyCampo de estrelas em camadas com nebulosa colorida; o cursor dá paralaxe. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.galaxia · estrelas · universoFundosfundosditherDegradê animado em pontilhado ordenado (estética retrô de 1 bit). WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.pontilhado · retro · bg-ditherFundosfundosgrainientDegradê de manchas suaves com grão fino de filme (muito usado em sites de agência). WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.degrade-granulado · grao-degrade · bg-grainientFundosfundosbeamsFeixes verticais de luz deslizando devagar, como em palco. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.feixes · colunas-de-luz · bg-beamsFundosfundosthreadsFios finos ondulando em conjunto, que se curvam em direção ao cursor. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.fios · linhas-flutuantes · bg-threadsFundosfundosorbEsfera de energia que pulsa no centro e segue o cursor de leve. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.esfera · orbe · bg-orbFundosfundosdark-veilVéu escuro de fumaça com brilhos discretos na cor do tema (fundo sóbrio e premium). WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.veu-escuro · fumaca · bg-dark-veilFundosfundosripple-gridGrade de linhas finas que ondula a partir do cursor, como água. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.grade-ondulada · bg-ripple-gridFundosfundoshyperspeedTúnel de rastros de luz em alta velocidade (sensação de viagem). WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.velocidade-da-luz · tunel-de-luz · bg-hyperspeedFundosfundostopographyCurvas de nível de um mapa topográfico, derivando devagar. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.topografia · curvas-de-nivel · bg-topographyFundosfundosradarRadar com varredura girando, anéis e pontos que acendem quando a linha passa. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.radar-de-varredura · bg-radarFundosfundoscolor-bendsFaixas largas de cor que se curvam e torcem, bem gráficas. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.curvas-de-cor · faixas-curvas · bg-color-bendsFundosfundoslightningRelâmpago: um raio de energia serpenteando de cima a baixo, com brilho e cintilação. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.relampago · raio · bg-lightningFundosfundosprismPrisma: um triângulo de vidro girando devagar que abre a luz branca num leque de arco-íris. WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.prisma · bg-prismFundosfundosbalatroTinta em redemoinho: cores do tema girando como tinta líquida misturada (estilo cartaz psicodélico). WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.tinta-girando · redemoinho · bg-balatroFundosfundoslight-pillarPilar de luz: uma coluna vertical brilhante com névoa e faíscas subindo (bom atrás de um título). WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.pilar-de-luz · coluna-de-luz · bg-light-pillarFundosfundosline-wavesLinhas finas em onda que se deslocam devagar e se curvam perto do cursor (fundo técnico e elegante). WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.linhas-em-onda · ondas-de-linhas · bg-line-wavesFundosfundosfaulty-terminalTerminal antigo com defeito: grade de caracteres piscando, linhas de varredura e faixa de interferência (use cor verde ou âmbar). WebGL leve, pausa fora da tela, movimento reduzido mostra um quadro parado e sem WebGL vira degradê em CSS.terminal-com-defeito · terminal · crtGráficosgráficoschartGráfico completo em SVG no estilo ApexCharts: linha, área, coluna, barra, empilhado, combinado (series[i].type), segundo eixo (series[i].yAxis: 1), rosca, pizza, radial, mapa de calor, candlestick ([abertura, máxima, mínima, fechamento]), treemap e sparkline. Zoom por seleção, anotações (annotations.xaxis/yaxis/points), exportar PNG/SVG/CSV. Eixos com escala automática, grade, tooltip compartilhado com linha-guia, legenda que liga e desliga séries, meta, rótulos, entrada e atualização animadas, claro/escuro e tabela para leitor de tela. Os dados vêm de um <script type="application/json">, de data-vm-config ou de uma <table> comum (que continua lá para quem não tem JavaScript). Por código: VatseMotion.chart(el, opções) devolve { update(), toggleSeries(), destroy() }.grafico · graficos · apexNenhum preset com esse termo. Tente em inglês ou português.
Páginas inteiras, prontas para trocar a marca.
FEITO PARA PESSOAS E PARA IAS
O Codex e o Claude sabem usar.
O catálogo é lido por máquina: cada preset traz descrição, parâmetros, apelidos e exemplo. Peça "monte uma landing com Smart UI e Vatse Motion" e aponte estes arquivos.
Os dois conversam sozinhos.
Com o Motion na página, as classes de entrada do Smart UI (sc-fade-up, data-animate, sc-grid-stagger, sc-card-3d) passam a usar o motor do Motion, sem mudar uma linha. Os componentes do Motion herdam a cor, o raio e as superfícies dos tokens --sc-*.