com título e links.",
"params": {},
"example": "
\n Marca \n \n \n \n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#card-nav"
},
{
"name": "animated-tabs",
"aliases": [
"abas-animadas",
"abas",
"tabs"
],
"category": "component",
"bundle": "components",
"description": "Abas 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.",
"params": {},
"example": "
\n
Mensal Anual Vitalício \n
R$ 49 por mês Cancele quando quiser.
\n
R$ 490 por ano Dois meses de presente.
\n
R$ 1.490 uma vez Acesso para sempre.
\n
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#animated-tabs"
},
{
"name": "infinite-scroll",
"aliases": [
"rolagem-infinita",
"lista-infinita",
"infiniteScroll"
],
"category": "component",
"bundle": "components",
"description": "Coluna 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.",
"params": {
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 30,
"description": "Velocidade automática (px/s; 0 desliga)."
},
"tilt": {
"attribute": "data-vm-tilt",
"attributeAliases": [],
"type": "boolean",
"default": false,
"description": "Inclinação 3D da coluna."
}
},
"example": "
\n
Agendamento online Lembretes no WhatsApp Pagamento por Pix Relatórios do mês Clube de assinatura \n
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#infinite-scroll"
},
{
"name": "decay-card",
"aliases": [
"cartao-deformado",
"decayCard"
],
"category": "component",
"bundle": "components",
"description": "Cartão com foto que se deforma como água quando o cursor passa rápido e volta ao normal quando para (deslocamento em SVG).",
"params": {
"strength": {
"attribute": "data-vm-strength",
"attributeAliases": [
"data-vm-forca"
],
"type": "number",
"default": 60,
"description": "Força máxima da deformação."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#decay-card"
},
{
"name": "reveal-lens",
"aliases": [
"lente-revela",
"lente",
"image-lens",
"revelar-com-cursor"
],
"category": "component",
"bundle": "components",
"description": "Duas imagens empilhadas: o cursor vira uma lente redonda que revela a segunda (antes e depois, dia e noite, rascunho e final).",
"params": {
"size": {
"attribute": "data-vm-size",
"attributeAliases": [],
"type": "number",
"default": 220,
"description": "Diâmetro da lente em px."
}
},
"example": "
\n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#reveal-lens"
},
{
"name": "beam-connect",
"aliases": [
"feixe-conectado",
"conexoes",
"animated-beam",
"integracoes"
],
"category": "component",
"bundle": "components",
"description": "Liga 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).",
"params": {
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 2.4,
"description": "Tempo de cada pulso."
},
"curve": {
"attribute": "data-vm-curve",
"attributeAliases": [],
"type": "number",
"default": 0.25,
"description": "Curvatura das linhas (0 = reta)."
}
},
"example": "
\n
WhatsApp Pix Agenda
\n
Vatse \n
E-mail Relatórios
\n
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#beam-connect"
},
{
"name": "dot-globe",
"aliases": [
"globo-de-pontos",
"globo",
"globe"
],
"category": "component",
"bundle": "components",
"description": "Globo 3D feito de pontos girando devagar, com cidades pulsando na cor do tema. Arraste para girar. Ótimo para alcance, regiões e presença.",
"params": {
"points": {
"attribute": "data-vm-points",
"attributeAliases": [],
"type": "number",
"default": 900,
"description": "Quantidade de pontos."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 0.12,
"description": "Velocidade de giro (voltas por... rad/s)."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#dot-globe"
},
{
"name": "confetti",
"aliases": [
"confete",
"celebrar"
],
"category": "component",
"bundle": "components",
"description": "Chuva de confete saindo do elemento ao clicar (ou ao aparecer), com física e cores do tema. Bom para \"pedido confirmado\" e \"assinatura feita\".",
"params": {
"count": {
"attribute": "data-vm-count",
"attributeAliases": [],
"type": "number",
"default": 90,
"description": "Quantidade de pedaços."
},
"on": {
"attribute": "data-vm-on",
"attributeAliases": [],
"type": "enum",
"default": "click",
"values": [
"click",
"view",
"manual"
],
"description": "Quando dispara (manual: dispare o evento vm:confetti no elemento)."
}
},
"example": "
Confirmar pedido ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#confetti"
},
{
"name": "ribbons",
"aliases": [
"fitas",
"fitas-do-cursor",
"cursor-ribbons"
],
"category": "component",
"bundle": "components",
"description": "Fitas coloridas que seguem o cursor com atraso e mola, desenhando curvas suaves pela seção.",
"params": {
"count": {
"attribute": "data-vm-count",
"attributeAliases": [],
"type": "number",
"default": 3,
"description": "Quantidade de fitas."
},
"width": {
"attribute": "data-vm-width",
"attributeAliases": [],
"type": "number",
"default": 10,
"description": "Espessura máxima."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#ribbons"
},
{
"name": "letter-glitch",
"aliases": [
"letras-glitch",
"matriz-de-letras",
"letterGlitch"
],
"category": "background",
"bundle": "components",
"description": "Fundo de letras e símbolos numa grade que trocam e mudam de cor sem parar, com vinheta nas bordas (estética hacker/dados).",
"params": {
"size": {
"attribute": "data-vm-size",
"attributeAliases": [],
"type": "number",
"default": 16,
"description": "Tamanho do caractere em px."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Ritmo das trocas."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#letter-glitch"
},
{
"name": "squares",
"aliases": [
"quadrados",
"grade-de-quadrados",
"squares-bg"
],
"category": "background",
"bundle": "components",
"description": "Grade de quadrados que desliza na diagonal; o quadrado sob o cursor acende. Fundo discreto para seções técnicas.",
"params": {
"size": {
"attribute": "data-vm-size",
"attributeAliases": [],
"type": "number",
"default": 44,
"description": "Lado do quadrado em px."
},
"direction": {
"attribute": "data-vm-direction",
"attributeAliases": [
"data-vm-direcao"
],
"type": "enum",
"default": "diagonal",
"values": [
"diagonal",
"up",
"down",
"left",
"right"
],
"description": "Direção do movimento."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 0.4,
"description": "Velocidade."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#squares"
},
{
"name": "meteors",
"aliases": [
"meteoros",
"estrelas-cadentes"
],
"category": "background",
"bundle": "components",
"description": "Meteoros finos riscando a seção na diagonal, com rastro que some. CSS puro e leve.",
"params": {
"count": {
"attribute": "data-vm-count",
"attributeAliases": [],
"type": "number",
"default": 18,
"description": "Quantidade de meteoros."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#meteors"
},
{
"name": "retro-grid",
"aliases": [
"grade-retro",
"grade-perspectiva",
"retroGrid"
],
"category": "background",
"bundle": "components",
"description": "Chão de grade em perspectiva correndo em direção ao horizonte (synthwave), com brilho no fim. CSS puro.",
"params": {
"angle": {
"attribute": "data-vm-angle",
"attributeAliases": [
"data-vm-angulo"
],
"type": "number",
"default": 65,
"description": "Inclinação do chão (graus)."
},
"size": {
"attribute": "data-vm-size",
"attributeAliases": [],
"type": "number",
"default": 60,
"description": "Tamanho da célula em px."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#retro-grid"
},
{
"name": "ripple-rings",
"aliases": [
"ondas-circulares",
"aneis",
"ripple-bg"
],
"category": "background",
"bundle": "components",
"description": "Anéis concêntricos que pulsam do centro para fora, como ondas numa poça (ótimo atrás de um ícone ou logo).",
"params": {
"rings": {
"attribute": "data-vm-rings",
"attributeAliases": [],
"type": "number",
"default": 6,
"description": "Quantidade de anéis."
},
"size": {
"attribute": "data-vm-size",
"attributeAliases": [],
"type": "number",
"default": 160,
"description": "Diâmetro do anel menor em px."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#ripple-rings"
},
{
"name": "motion-path",
"aliases": [
"trajetoria",
"caminho",
"seguir-caminho",
"motionPath"
],
"category": "svg",
"bundle": "components",
"description": "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.",
"params": {
"mode": {
"attribute": "data-vm-mode",
"attributeAliases": [],
"type": "enum",
"default": "scroll",
"values": [
"scroll",
"loop"
],
"description": "scroll: a rolagem move; loop: anda sozinho."
},
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 6,
"description": "Tempo de uma volta (modo loop)."
},
"rotate": {
"attribute": "data-vm-rotate",
"attributeAliases": [],
"type": "boolean",
"default": true,
"description": "Gira o elemento na direção da curva."
},
"trail": {
"attribute": "data-vm-trail",
"attributeAliases": [],
"type": "boolean",
"default": true,
"description": "Desenha o traço até onde o elemento chegou."
},
"smooth": {
"attribute": "data-vm-smooth",
"attributeAliases": [
"data-vm-suavizacao"
],
"type": "number",
"default": 0.4,
"description": "Suavização da agulha no modo scroll."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#motion-path"
},
{
"name": "morph-shape",
"aliases": [
"morfar-forma",
"transformar-forma",
"morphSVG",
"shape-morph"
],
"category": "svg",
"bundle": "components",
"description": "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.",
"params": {
"shapes": {
"attribute": "data-vm-shapes",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Os \"d\" das outras formas, separados por |."
},
"mode": {
"attribute": "data-vm-mode",
"attributeAliases": [],
"type": "enum",
"default": "loop",
"values": [
"loop",
"scroll",
"hover"
],
"description": "Quando morfar."
},
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 1.2,
"description": "Tempo de cada transformação."
},
"hold": {
"attribute": "data-vm-hold",
"attributeAliases": [],
"type": "time",
"default": 1.2,
"description": "Pausa em cada forma (modo loop)."
},
"points": {
"attribute": "data-vm-points",
"attributeAliases": [],
"type": "number",
"default": 120,
"description": "Precisão do contorno (pontos)."
}
},
"example": "
\n \n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#morph-shape"
},
{
"name": "preloader",
"aliases": [
"carregamento",
"tela-de-abertura",
"loader",
"intro-counter"
],
"category": "experience",
"bundle": "components",
"description": "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.",
"params": {
"exit": {
"attribute": "data-vm-exit",
"attributeAliases": [],
"type": "enum",
"default": "curtain",
"values": [
"curtain",
"split",
"fade"
],
"description": "Saída: cortina para cima, abrindo ao meio, ou esmaecendo."
},
"min": {
"attribute": "data-vm-min",
"attributeAliases": [],
"type": "time",
"default": 1.2,
"description": "Tempo mínimo na tela (para o contador ser visto)."
},
"max": {
"attribute": "data-vm-max",
"attributeAliases": [
"data-vm-maximo"
],
"type": "time",
"default": 6,
"description": "Tempo máximo: sai mesmo se algo não carregar."
}
},
"example": "
\n 0 \n
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#preloader"
},
{
"name": "page-transition",
"aliases": [
"transicao-de-pagina",
"troca-de-pagina",
"pageTransition",
"barba"
],
"category": "experience",
"bundle": "components",
"description": "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.",
"params": {
"direction": {
"attribute": "data-vm-direction",
"attributeAliases": [
"data-vm-direcao"
],
"type": "enum",
"default": "up",
"values": [
"up",
"down",
"left",
"right"
],
"description": "Para onde a cortina corre."
},
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 0.7,
"description": "Duração de cada metade."
},
"exclude": {
"attribute": "data-vm-exclude",
"attributeAliases": [],
"type": "string",
"default": "[data-vm-no-transition]",
"description": "Links que não fazem a transição."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#page-transition"
},
{
"name": "button-fx",
"aliases": [
"botao-efeito",
"efeito-de-botao",
"buttonHover",
"btn-fx"
],
"category": "interaction",
"bundle": "components",
"description": "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).",
"params": {
"variant": {
"attribute": "data-vm-variant",
"attributeAliases": [],
"type": "enum",
"default": "fill",
"values": [
"fill",
"shine",
"arrow",
"roll",
"press"
],
"description": "O efeito."
}
},
"example": "
Começar agora ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#button-fx"
},
{
"name": "link-underline",
"aliases": [
"sublinhado",
"sublinhado-animado",
"underline"
],
"category": "interaction",
"bundle": "components",
"description": "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.",
"params": {
"variant": {
"attribute": "data-vm-variant",
"attributeAliases": [],
"type": "enum",
"default": "swap",
"values": [
"grow",
"center",
"swap",
"wave"
],
"description": "O estilo."
},
"thickness": {
"attribute": "data-vm-thickness",
"attributeAliases": [],
"type": "length",
"default": 2,
"description": "Espessura do traço."
}
},
"example": "
\n Sistemas Preços Contato \n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#link-underline"
},
{
"name": "hamburger",
"aliases": [
"menu-hamburguer",
"botao-menu",
"menu-toggle"
],
"category": "interaction",
"bundle": "components",
"description": "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.",
"params": {
"target": {
"attribute": "data-vm-target",
"attributeAliases": [
"data-vm-alvo"
],
"type": "selector",
"default": "",
"description": "O menu que o botão abre."
},
"variant": {
"attribute": "data-vm-variant",
"attributeAliases": [],
"type": "enum",
"default": "cross",
"values": [
"cross",
"arrow",
"squeeze"
],
"description": "Como os traços se transformam."
}
},
"example": "
\n",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#hamburger"
},
{
"name": "toggle-switch",
"aliases": [
"chave",
"interruptor",
"switch"
],
"category": "interaction",
"bundle": "components",
"description": "Transforma um checkbox numa chave liga/desliga com mola e brilho. O input continua lá (teclado, formulário e leitor de tela funcionam igual).",
"params": {
"size": {
"attribute": "data-vm-size",
"attributeAliases": [],
"type": "length",
"default": 28,
"description": "Altura da chave."
}
},
"example": "
\n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#toggle-switch"
},
{
"name": "progress-ring",
"aliases": [
"anel-de-progresso",
"grafico-circular",
"radial-progress"
],
"category": "component",
"bundle": "components",
"description": "Anel 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.",
"params": {
"value": {
"attribute": "data-vm-value",
"attributeAliases": [],
"type": "number",
"default": -1,
"description": "Valor de 0 a 100 (sem ele, usa o texto)."
},
"size": {
"attribute": "data-vm-size",
"attributeAliases": [],
"type": "number",
"default": 160,
"description": "Diâmetro em px."
},
"stroke": {
"attribute": "data-vm-stroke",
"attributeAliases": [],
"type": "number",
"default": 10,
"description": "Espessura do anel."
},
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 1.6,
"description": "Duração."
},
"suffix": {
"attribute": "data-vm-suffix",
"attributeAliases": [
"data-vm-sufixo"
],
"type": "string",
"default": "%",
"description": "Texto depois do número."
}
},
"example": "
87
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#progress-ring"
},
{
"name": "skeleton",
"aliases": [
"esqueleto",
"carregando-imagem",
"shimmer"
],
"category": "component",
"bundle": "components",
"description": "Enquanto 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.",
"params": {
"radius": {
"attribute": "data-vm-radius",
"attributeAliases": [
"data-vm-raio",
"data-vm-arredondamento"
],
"type": "length",
"default": 12,
"description": "Cantos do brilho."
}
},
"example": "
\n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#skeleton"
},
{
"name": "ripple",
"aliases": [
"onda-de-toque",
"ondulacao",
"ink"
],
"category": "interaction",
"bundle": "components",
"description": "Onda que se espalha a partir do ponto do toque ou clique (como no Material), na cor do texto do elemento.",
"params": {
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 0.6,
"description": "Duração da onda."
},
"opacity": {
"attribute": "data-vm-opacity",
"attributeAliases": [],
"type": "number",
"default": 0.28,
"description": "Intensidade."
}
},
"example": "
Toque aqui ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#ripple"
},
{
"name": "mouse-parallax",
"aliases": [
"paralaxe-do-mouse",
"camadas-com-mouse",
"mouseParallax",
"depth-layers"
],
"category": "interaction",
"bundle": "components",
"description": "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.",
"params": {
"strength": {
"attribute": "data-vm-strength",
"attributeAliases": [
"data-vm-forca"
],
"type": "number",
"default": 40,
"description": "Deslocamento máximo em px (camada de profundidade 1)."
},
"smooth": {
"attribute": "data-vm-smooth",
"attributeAliases": [
"data-vm-suavizacao"
],
"type": "number",
"default": 6,
"description": "Suavidade (maior = mais rápido)."
},
"invert": {
"attribute": "data-vm-invert",
"attributeAliases": [],
"type": "boolean",
"default": false,
"description": "Move a favor do mouse em vez de contra."
}
},
"example": "
\n
\n
Profundidade \n
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#mouse-parallax"
},
{
"name": "image-distort",
"aliases": [
"distorcer-imagem",
"imagem-liquida",
"liquid-hover",
"displacement"
],
"category": "component",
"bundle": "components",
"description": "Ao 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.",
"params": {
"strength": {
"attribute": "data-vm-strength",
"attributeAliases": [
"data-vm-forca"
],
"type": "number",
"default": 28,
"description": "Força da ondulação."
},
"scale": {
"attribute": "data-vm-scale",
"attributeAliases": [
"data-vm-escala"
],
"type": "number",
"default": 0.012,
"description": "Tamanho das ondas (menor = ondas maiores)."
},
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 0.9,
"description": "Duração da ida e da volta."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#image-distort"
},
{
"name": "tile-reveal",
"aliases": [
"revelar-em-blocos",
"mosaico",
"tiles",
"grid-reveal"
],
"category": "reveal",
"bundle": "components",
"description": "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.",
"params": {
"rows": {
"attribute": "data-vm-rows",
"attributeAliases": [],
"type": "number",
"default": 5,
"description": "Linhas de blocos."
},
"cols": {
"attribute": "data-vm-cols",
"attributeAliases": [],
"type": "number",
"default": 8,
"description": "Colunas de blocos."
},
"from": {
"attribute": "data-vm-from",
"attributeAliases": [
"data-vm-origem",
"data-vm-de"
],
"type": "enum",
"default": "start",
"values": [
"start",
"center",
"end",
"random"
],
"description": "De onde a onda começa."
},
"effect": {
"attribute": "data-vm-effect",
"attributeAliases": [
"data-vm-efeito"
],
"type": "enum",
"default": "flip",
"values": [
"flip",
"fade",
"drop"
],
"description": "Como cada bloco chega."
},
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 1.4,
"description": "Tempo total da montagem."
}
},
"example": "
\n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#tile-reveal"
},
{
"name": "text-roll",
"aliases": [
"rolar-letras",
"letras-rolando",
"textRoll",
"letter-roll"
],
"category": "text",
"bundle": "components",
"description": "No hover, cada letra rola para cima e é substituída por uma cópia vinda de baixo, em cascata. Para menus e links curtos.",
"params": {
"each": {
"attribute": "data-vm-each",
"attributeAliases": [
"data-vm-intervalo"
],
"type": "time",
"default": 0.025,
"description": "Intervalo entre letras."
},
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 0.45,
"description": "Tempo de cada letra."
}
},
"example": "
Portfólio ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#text-roll"
},
{
"name": "list-reveal",
"aliases": [
"lista-revelada",
"lista-com-linhas",
"table-reveal"
],
"category": "group",
"bundle": "components",
"description": "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.",
"params": {
"each": {
"attribute": "data-vm-each",
"attributeAliases": [
"data-vm-intervalo"
],
"type": "time",
"default": 0.09,
"description": "Intervalo entre itens."
},
"line": {
"attribute": "data-vm-line",
"attributeAliases": [],
"type": "boolean",
"default": true,
"description": "Desenha a linha divisória."
}
},
"example": "
\n Corte masculino R$ 45 \n Barba completa R$ 35 \n Corte + barba R$ 70 \n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#list-reveal"
},
{
"name": "deal-cards",
"aliases": [
"distribuir-cartas",
"cartas-do-monte",
"dealCards"
],
"category": "group",
"bundle": "components",
"description": "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.",
"params": {
"each": {
"attribute": "data-vm-each",
"attributeAliases": [
"data-vm-intervalo"
],
"type": "time",
"default": 0.08,
"description": "Intervalo entre cartas."
},
"spread": {
"attribute": "data-vm-spread",
"attributeAliases": [],
"type": "number",
"default": 10,
"description": "Quanto as cartas ficam tortas no monte (graus)."
},
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 0.9,
"description": "Tempo de cada carta."
}
},
"example": "
\n
Plano Essencial \n
Plano Profissional \n
Plano Completo \n
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#deal-cards"
},
{
"name": "stagger-3d",
"aliases": [
"cascata-3d",
"entrada-3d",
"depth-stagger"
],
"category": "group",
"bundle": "components",
"description": "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.",
"params": {
"from": {
"attribute": "data-vm-from",
"attributeAliases": [
"data-vm-origem",
"data-vm-de"
],
"type": "enum",
"default": "start",
"values": [
"start",
"center",
"end"
],
"description": "De onde a onda começa."
},
"angle": {
"attribute": "data-vm-angle",
"attributeAliases": [
"data-vm-angulo"
],
"type": "number",
"default": 55,
"description": "Inclinação inicial (graus)."
},
"each": {
"attribute": "data-vm-each",
"attributeAliases": [
"data-vm-intervalo"
],
"type": "time",
"default": 0.07,
"description": "Intervalo entre filhos."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#stagger-3d"
},
{
"name": "text-on-path",
"aliases": [
"texto-na-curva",
"texto-em-onda",
"textPath"
],
"category": "svg",
"bundle": "components",
"description": "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.",
"params": {
"shape": {
"attribute": "data-vm-shape",
"attributeAliases": [],
"type": "enum",
"default": "wave",
"values": [
"wave",
"arc",
"arc-down"
],
"description": "Forma da curva."
},
"mode": {
"attribute": "data-vm-mode",
"attributeAliases": [],
"type": "enum",
"default": "scroll",
"values": [
"scroll",
"loop"
],
"description": "O que move o texto."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 40,
"description": "Velocidade no loop (px por segundo)."
},
"size": {
"attribute": "data-vm-size",
"attributeAliases": [],
"type": "number",
"default": 36,
"description": "Tamanho da letra (px)."
}
},
"example": "
Agenda online · Pagamento no Pix · Lembrete no WhatsApp ·
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#text-on-path"
},
{
"name": "sketch",
"aliases": [
"desenho-a-mao",
"rabisco",
"draw-sequence"
],
"category": "svg",
"bundle": "components",
"description": "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.",
"params": {
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 2.4,
"description": "Tempo total do desenho."
},
"fill": {
"attribute": "data-vm-fill",
"attributeAliases": [],
"type": "boolean",
"default": true,
"description": "Pinta os preenchimentos no fim."
}
},
"example": "
\n \n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#sketch"
},
{
"name": "wave-divider",
"aliases": [
"divisoria-onda",
"onda-de-secao",
"waveDivider"
],
"category": "svg",
"bundle": "components",
"description": "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).",
"params": {
"position": {
"attribute": "data-vm-position",
"attributeAliases": [],
"type": "enum",
"default": "bottom",
"values": [
"bottom",
"top"
],
"description": "Em que borda da seção."
},
"color": {
"attribute": "data-vm-color",
"attributeAliases": [
"data-vm-cor"
],
"type": "color",
"default": "currentColor",
"description": "Cor da onda (o fundo da seção vizinha)."
},
"height": {
"attribute": "data-vm-height",
"attributeAliases": [],
"type": "number",
"default": 80,
"description": "Altura da onda (px)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 0.6,
"description": "Velocidade do balanço."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#wave-divider"
},
{
"name": "stack-sections",
"aliases": [
"secoes-empilhadas",
"paineis-empilhados",
"stacking-sections"
],
"category": "scroll",
"bundle": "components",
"description": "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.",
"params": {
"scale": {
"attribute": "data-vm-scale",
"attributeAliases": [
"data-vm-escala"
],
"type": "number",
"default": 0.92,
"description": "Tamanho final da seção coberta."
},
"dim": {
"attribute": "data-vm-dim",
"attributeAliases": [
"data-vm-apagado"
],
"type": "number",
"default": 0.45,
"description": "Quanto escurece (0 a 1)."
}
},
"example": "
\n \n \n \n
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#stack-sections"
},
{
"name": "circle-reveal",
"aliases": [
"revelar-em-circulo",
"circulo-que-abre",
"iris"
],
"category": "scroll",
"bundle": "components",
"description": "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).",
"params": {
"origin": {
"attribute": "data-vm-origin",
"attributeAliases": [],
"type": "enum",
"default": "center",
"values": [
"center",
"top",
"bottom",
"left",
"right"
],
"description": "De onde o círculo nasce."
},
"start": {
"attribute": "data-vm-start",
"attributeAliases": [
"data-vm-inicio"
],
"type": "string",
"default": "top bottom",
"description": "Onde começa a abrir."
},
"end": {
"attribute": "data-vm-end",
"attributeAliases": [
"data-vm-fim"
],
"type": "string",
"default": "top 15%",
"description": "Onde termina de abrir."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#circle-reveal"
},
{
"name": "float-label",
"aliases": [
"rotulo-flutuante",
"label-flutuante",
"floating-label"
],
"category": "interaction",
"bundle": "components",
"description": "Nos campos com
e \n",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#float-label"
},
{
"name": "form-feedback",
"aliases": [
"retorno-do-formulario",
"validacao-animada",
"form-shake"
],
"category": "interaction",
"bundle": "components",
"description": "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.",
"params": {
"sending": {
"attribute": "data-vm-sending",
"attributeAliases": [],
"type": "string",
"default": "Enviando…",
"description": "Texto do botão durante o envio."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#form-feedback"
},
{
"name": "flip-card",
"aliases": [
"cartao-que-vira",
"virar-cartao",
"flipCard"
],
"category": "component",
"bundle": "components",
"description": "Cartã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]).",
"params": {
"mode": {
"attribute": "data-vm-mode",
"attributeAliases": [],
"type": "enum",
"default": "hover",
"values": [
"hover",
"click"
],
"description": "O que vira o cartão (no celular, sempre o toque)."
},
"axis": {
"attribute": "data-vm-axis",
"attributeAliases": [
"data-vm-eixo"
],
"type": "enum",
"default": "y",
"values": [
"y",
"x"
],
"description": "Eixo do giro."
}
},
"example": "
\n Frente
\n Verso
\n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#flip-card"
},
{
"name": "ring-carousel",
"aliases": [
"carrossel-anel-3d",
"carrossel-em-anel",
"cylinder-carousel"
],
"category": "component",
"bundle": "components",
"description": "Os 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.",
"params": {
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 6,
"description": "Giro automático (graus por segundo; 0 desliga)."
},
"tilt": {
"attribute": "data-vm-tilt",
"attributeAliases": [],
"type": "number",
"default": -6,
"description": "Inclinação do anel (graus)."
},
"gap": {
"attribute": "data-vm-gap",
"attributeAliases": [],
"type": "number",
"default": 24,
"description": "Espaço entre itens (px)."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#ring-carousel"
},
{
"name": "video-text",
"aliases": [
"video-no-texto",
"texto-com-video",
"videoText"
],
"category": "text",
"bundle": "components",
"description": "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.",
"params": {
"src": {
"attribute": "data-vm-src",
"attributeAliases": [
"data-vm-imagem"
],
"type": "string",
"default": "",
"description": "Endereço do vídeo (mp4 ou webm, sem som)."
},
"poster": {
"attribute": "data-vm-poster",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Imagem enquanto o vídeo carrega."
}
},
"example": "
ONDA ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#video-text"
},
{
"name": "slideshow",
"aliases": [
"apresentacao",
"galeria-com-transicao",
"slider-de-fotos",
"hero-slider"
],
"category": "component",
"bundle": "components",
"description": "Galeria 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.",
"params": {
"effect": {
"attribute": "data-vm-effect",
"attributeAliases": [
"data-vm-efeito"
],
"type": "enum",
"default": "zoom",
"values": [
"zoom",
"wipe",
"blinds",
"split"
],
"description": "A transição."
},
"interval": {
"attribute": "data-vm-interval",
"attributeAliases": [],
"type": "time",
"default": 5,
"description": "Segundos por foto (0 desliga o automático)."
},
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 1.1,
"description": "Duração da transição."
},
"controls": {
"attribute": "data-vm-controls",
"attributeAliases": [],
"type": "boolean",
"default": true,
"description": "Setas e pontos."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#slideshow"
},
{
"name": "kpi-card",
"aliases": [
"indicador",
"cartao-indicador",
"stat-card",
"kpi"
],
"category": "component",
"bundle": "components",
"description": "Cartã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.",
"params": {
"label": {
"attribute": "data-vm-label",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Nome do indicador."
},
"value": {
"attribute": "data-vm-value",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "O valor (sem ele, usa o texto do elemento)."
},
"prefix": {
"attribute": "data-vm-prefix",
"attributeAliases": [
"data-vm-prefixo"
],
"type": "string",
"default": "",
"description": "Antes do número (ex.: R$ )."
},
"suffix": {
"attribute": "data-vm-suffix",
"attributeAliases": [
"data-vm-sufixo"
],
"type": "string",
"default": "",
"description": "Depois do número (ex.: %)."
},
"decimals": {
"attribute": "data-vm-decimals",
"attributeAliases": [
"data-vm-decimais"
],
"type": "number",
"default": 0,
"description": "Casas decimais."
},
"delta": {
"attribute": "data-vm-delta",
"attributeAliases": [],
"type": "number",
"default": 0,
"description": "Variação em % (positivo ou negativo)."
},
"invert": {
"attribute": "data-vm-invert",
"attributeAliases": [],
"type": "boolean",
"default": false,
"description": "Cair é bom (ex.: cancelamentos)."
},
"trend": {
"attribute": "data-vm-trend",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Valores do minigráfico separados por vírgula."
},
"caption": {
"attribute": "data-vm-caption",
"attributeAliases": [],
"type": "string",
"default": "vs. mês anterior",
"description": "Texto ao lado da variação."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#kpi-card"
},
{
"name": "before-after",
"aliases": [
"antes-e-depois",
"comparar-imagens",
"image-compare",
"comparison"
],
"category": "component",
"bundle": "components",
"description": "Compara 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.",
"params": {
"start": {
"attribute": "data-vm-start",
"attributeAliases": [
"data-vm-inicio"
],
"type": "number",
"default": 50,
"description": "Posição inicial do divisor (%)."
},
"before": {
"attribute": "data-vm-before",
"attributeAliases": [],
"type": "string",
"default": "Antes",
"description": "Rótulo da primeira foto."
},
"after": {
"attribute": "data-vm-after",
"attributeAliases": [],
"type": "string",
"default": "Depois",
"description": "Rótulo da segunda foto."
}
},
"example": "
\n
\n
\n
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#before-after"
},
{
"name": "lightbox",
"aliases": [
"ampliar-foto",
"galeria-tela-cheia",
"zoom-de-foto"
],
"category": "component",
"bundle": "components",
"description": "Clique 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.",
"params": {
"selector": {
"attribute": "data-vm-selector",
"attributeAliases": [
"data-vm-seletor"
],
"type": "string",
"default": "img",
"description": "Quais imagens abrem."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#lightbox"
},
{
"name": "timeline",
"aliases": [
"linha-do-tempo",
"linha-de-etapas",
"historia",
"process"
],
"category": "scroll",
"bundle": "components",
"description": "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.",
"params": {
"side": {
"attribute": "data-vm-side",
"attributeAliases": [],
"type": "enum",
"default": "left",
"values": [
"left",
"alternate"
],
"description": "Etapas todas à direita da linha, ou alternando lados (no celular, sempre à direita)."
}
},
"example": "
\n Agendamento O cliente escolhe o horário pelo site.
Lembrete Aviso no WhatsApp um dia antes.
Atendimento Check-in e pagamento no Pix.
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#timeline"
},
{
"name": "chat-demo",
"aliases": [
"conversa-encenada",
"chat-animado",
"whatsapp-demo",
"mensagens"
],
"category": "component",
"bundle": "components",
"description": "Conversa 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.",
"params": {
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da conversa (2 = duas vezes mais rápida)."
},
"loop": {
"attribute": "data-vm-loop",
"attributeAliases": [],
"type": "boolean",
"default": false,
"description": "Recomeça depois de alguns segundos."
}
},
"example": "
\n
Oi! Tem horário amanhã à tarde?
\n
Tenho às 15h e às 16h30. Qual prefere?
\n
15h, por favor 🙌
\n
Agendado! Te mando um lembrete 1h antes.
\n
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#chat-demo"
},
{
"name": "price-toggle",
"aliases": [
"preco-mensal-anual",
"alternar-preco",
"pricing-toggle",
"billing-switch"
],
"category": "interaction",
"bundle": "components",
"description": "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.",
"params": {
"monthly": {
"attribute": "data-vm-monthly",
"attributeAliases": [],
"type": "string",
"default": "Mensal",
"description": "Rótulo do mensal."
},
"yearly": {
"attribute": "data-vm-yearly",
"attributeAliases": [],
"type": "string",
"default": "Anual",
"description": "Rótulo do anual."
},
"badge": {
"attribute": "data-vm-badge",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Selo no anual (ex.: -20%)."
},
"start": {
"attribute": "data-vm-start",
"attributeAliases": [
"data-vm-inicio"
],
"type": "enum",
"default": "monthly",
"values": [
"monthly",
"yearly"
],
"description": "Período inicial."
}
},
"example": "
\n Profissional R$ 149 /mês \n cobrado R$ 1.428 por ano ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#price-toggle"
},
{
"name": "columns-parallax",
"aliases": [
"colunas-em-paralaxe",
"colunas-opostas",
"parallax-columns"
],
"category": "scroll",
"bundle": "components",
"description": "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.",
"params": {
"distance": {
"attribute": "data-vm-distance",
"attributeAliases": [
"data-vm-distancia"
],
"type": "number",
"default": 18,
"description": "Quanto cada coluna anda (% da altura da área)."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#columns-parallax"
},
{
"name": "zoom-through-text",
"aliases": [
"mergulhar-no-texto",
"atravessar-letra",
"zoom-text",
"text-zoom-reveal"
],
"category": "scroll",
"bundle": "components",
"description": "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).",
"params": {
"letter": {
"attribute": "data-vm-letter",
"attributeAliases": [],
"type": "number",
"default": -1,
"description": "Posição da letra por onde entrar (0 = primeira; -1 = a do meio)."
},
"scale": {
"attribute": "data-vm-scale",
"attributeAliases": [
"data-vm-escala"
],
"type": "number",
"default": 70,
"description": "Zoom final."
},
"length": {
"attribute": "data-vm-length",
"attributeAliases": [
"data-vm-comprimento"
],
"type": "string",
"default": "+=160%",
"description": "Quanto rolar durante o mergulho."
}
},
"example": "
\n VATSE \n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#zoom-through-text"
},
{
"name": "card-fan",
"aliases": [
"leque",
"cartas-em-leque",
"card-spread"
],
"category": "interaction",
"bundle": "components",
"description": "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.",
"params": {
"mode": {
"attribute": "data-vm-mode",
"attributeAliases": [],
"type": "enum",
"default": "view",
"values": [
"view",
"hover"
],
"description": "Abre ao aparecer ou ao passar o mouse."
},
"spread": {
"attribute": "data-vm-spread",
"attributeAliases": [],
"type": "number",
"default": 12,
"description": "Abertura entre cartões (graus)."
}
},
"example": "
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#card-fan"
},
{
"name": "back-to-top",
"aliases": [
"voltar-ao-topo",
"ir-ao-topo",
"scroll-top"
],
"category": "interaction",
"bundle": "components",
"description": "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
ou .",
"params": {
"after": {
"attribute": "data-vm-after",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Aparece depois de quantas telas."
}
},
"example": "4,8
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#star-rating"
},
{
"name": "pulse-dot",
"aliases": [
"ponto-pulsante",
"ao-vivo",
"live-dot",
"status-dot"
],
"category": "component",
"bundle": "components",
"description": "Ponto 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.",
"params": {
"color": {
"attribute": "data-vm-color",
"attributeAliases": [
"data-vm-cor"
],
"type": "color",
"default": "#10b981",
"description": "Cor do ponto."
}
},
"example": "Atendimento online agora ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#pulse-dot"
},
{
"name": "progress-bars",
"aliases": [
"barras-de-progresso",
"barras-de-habilidade",
"skill-bars"
],
"category": "component",
"bundle": "components",
"description": "Barras 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).",
"params": {
"each": {
"attribute": "data-vm-each",
"attributeAliases": [
"data-vm-intervalo"
],
"type": "time",
"default": 0.12,
"description": "Intervalo entre barras."
},
"suffix": {
"attribute": "data-vm-suffix",
"attributeAliases": [
"data-vm-sufixo"
],
"type": "string",
"default": "%",
"description": "Depois do número."
}
},
"example": "\n
Satisfação dos clientes
\n
Retorno em 30 dias
\n
Agendamentos pelo celular
\n
\n Painel Como funciona Planos \n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#scrollspy"
},
{
"name": "faq",
"aliases": [
"perguntas-frequentes",
"sanfona",
"accordion"
],
"category": "component",
"bundle": "components",
"description": "Perguntas frequentes a partir de / (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.",
"params": {
"single": {
"attribute": "data-vm-single",
"attributeAliases": [],
"type": "boolean",
"default": false,
"description": "Só uma aberta por vez."
},
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 0.42,
"description": "Duração."
}
},
"example": "\n
Preciso instalar alguma coisa? Não. Funciona no navegador do computador e do celular.
\n
Posso cancelar quando quiser? Sim, sem multa. O acesso segue até o fim do período pago.
\n
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.",
"params": {},
"example": "Abrir \n\n Como funciona Explique aqui.
\n Fechar \n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#dialog"
},
{
"name": "drawer",
"aliases": [
"gaveta",
"painel-lateral",
"side-sheet"
],
"category": "component",
"bundle": "components",
"description": "Painel que desliza da lateral (ou de baixo, no estilo de folha do celular) a partir de um nativo. Mesmos gatilhos do dialog: data-vm-open=\"#id\" abre, [data-vm-close], Esc ou clique fora fecham.",
"params": {
"side": {
"attribute": "data-vm-side",
"attributeAliases": [],
"type": "enum",
"default": "right",
"values": [
"right",
"left",
"bottom"
],
"description": "De onde o painel sai."
}
},
"example": "Ver carrinho \n\n Seu carrinho 2 itens
\n Fechar \n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#drawer"
},
{
"name": "tooltip",
"aliases": [
"dica",
"balao-de-ajuda"
],
"category": "interaction",
"bundle": "components",
"description": "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.",
"params": {
"text": {
"attribute": "data-vm-text",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "O texto da dica."
},
"placement": {
"attribute": "data-vm-placement",
"attributeAliases": [],
"type": "enum",
"default": "top",
"values": [
"top",
"bottom"
],
"description": "Posição preferida."
}
},
"example": "Pix ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#tooltip"
},
{
"name": "copy-button",
"aliases": [
"copiar",
"botao-copiar"
],
"category": "interaction",
"bundle": "components",
"description": "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.",
"params": {
"text": {
"attribute": "data-vm-text",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "O texto a copiar."
},
"target": {
"attribute": "data-vm-target",
"attributeAliases": [
"data-vm-alvo"
],
"type": "selector",
"default": "",
"description": "Ou copia o conteúdo deste elemento."
},
"done": {
"attribute": "data-vm-done",
"attributeAliases": [],
"type": "string",
"default": "Copiado!",
"description": "Rótulo de confirmação."
}
},
"example": "Copiar chave Pix ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#copy-button"
},
{
"name": "heart-burst",
"aliases": [
"curtir",
"like",
"coracao"
],
"category": "interaction",
"bundle": "components",
"description": "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.",
"params": {
"count": {
"attribute": "data-vm-count",
"attributeAliases": [],
"type": "number",
"default": -1,
"description": "Contador inicial (-1 esconde)."
},
"color": {
"attribute": "data-vm-color",
"attributeAliases": [
"data-vm-cor"
],
"type": "color",
"default": "#ef4444",
"description": "Cor do coração."
}
},
"example": "\n
Usamos cookies para medir visitas e melhorar o site.
\n
Recusar \n
Aceitar \n
\n
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#otp-input"
},
{
"name": "password-meter",
"aliases": [
"forca-da-senha",
"senha-forte"
],
"category": "interaction",
"bundle": "components",
"description": "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.",
"params": {
"min": {
"attribute": "data-vm-min",
"attributeAliases": [],
"type": "number",
"default": 8,
"description": "Tamanho mínimo."
},
"toggle": {
"attribute": "data-vm-toggle",
"attributeAliases": [],
"type": "boolean",
"default": true,
"description": "Botão de mostrar a senha."
}
},
"example": "Crie uma senha\n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#password-meter"
},
{
"name": "dropzone",
"aliases": [
"enviar-arquivos",
"area-de-upload",
"arrastar-arquivos"
],
"category": "interaction",
"bundle": "components",
"description": "Á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 \n
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#dropzone"
},
{
"name": "fly-to-cart",
"aliases": [
"voar-para-o-carrinho",
"adicionar-ao-carrinho"
],
"category": "interaction",
"bundle": "components",
"description": "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 🛒 0 \n\n Adicionar \n ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#fly-to-cart"
},
{
"name": "quantity",
"aliases": [
"quantidade",
"seletor-de-quantidade",
"qty"
],
"category": "interaction",
"bundle": "components",
"description": "Seletor de quantidade com botões − e + em volta de um \n
",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#quantity"
},
{
"name": "sticky-bar",
"aliases": [
"barra-fixa",
"barra-de-compra",
"sticky-cta"
],
"category": "scroll",
"bundle": "components",
"description": "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.",
"params": {
"target": {
"attribute": "data-vm-target",
"attributeAliases": [
"data-vm-alvo"
],
"type": "selector",
"default": "",
"description": "O botão principal que, fora da tela, faz a barra aparecer."
},
"side": {
"attribute": "data-vm-side",
"attributeAliases": [],
"type": "enum",
"default": "bottom",
"values": [
"bottom",
"top"
],
"description": "Borda de onde sai."
}
},
"example": "Assinar agora \n",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#sticky-bar"
},
{
"name": "avatar-stack",
"aliases": [
"rostos-empilhados",
"avatares",
"avatar-group"
],
"category": "component",
"bundle": "components",
"description": "Fotos 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.",
"params": {
"more": {
"attribute": "data-vm-more",
"attributeAliases": [],
"type": "number",
"default": 0,
"description": "Número da bolha final (0 esconde)."
},
"size": {
"attribute": "data-vm-size",
"attributeAliases": [],
"type": "length",
"default": 44,
"description": "Tamanho de cada foto."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#avatar-stack"
},
{
"name": "toast-stack",
"aliases": [
"avisos-empilhados",
"notificacoes",
"toast"
],
"category": "component",
"bundle": "components",
"description": "Avisos 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.",
"params": {
"side": {
"attribute": "data-vm-side",
"attributeAliases": [],
"type": "enum",
"default": "bottom-right",
"values": [
"bottom-right",
"bottom-left",
"top-right",
"top-left",
"bottom-center"
],
"description": "Canto da tela."
},
"duration": {
"attribute": "data-vm-duration",
"attributeAliases": [
"data-vm-duracao"
],
"type": "time",
"default": 4,
"description": "Tempo na tela (0 = até fechar)."
}
},
"example": "
\nReservar ",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#toast-stack"
},
{
"name": "silk",
"aliases": [
"seda",
"bg-silk"
],
"category": "background",
"bundle": "backgrounds",
"description": "Seda 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#silk"
},
{
"name": "plasma",
"aliases": [
"plasma-fluido",
"bg-plasma"
],
"category": "background",
"bundle": "backgrounds",
"description": "Plasma: 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#plasma"
},
{
"name": "iridescence",
"aliases": [
"iridescente",
"furta-cor",
"bg-iridescence"
],
"category": "background",
"bundle": "backgrounds",
"description": "Pelí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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#iridescence"
},
{
"name": "liquid-chrome",
"aliases": [
"cromo-liquido",
"metal-liquido",
"bg-liquid-chrome"
],
"category": "background",
"bundle": "backgrounds",
"description": "Metal 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#liquid-chrome"
},
{
"name": "light-rays",
"aliases": [
"raios-de-luz",
"feixes-de-luz",
"bg-light-rays"
],
"category": "background",
"bundle": "backgrounds",
"description": "Raios 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#light-rays"
},
{
"name": "gradient-waves",
"aliases": [
"ondas-degrade",
"ondas",
"bg-gradient-waves"
],
"category": "background",
"bundle": "backgrounds",
"description": "Faixas 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#gradient-waves"
},
{
"name": "galaxy",
"aliases": [
"galaxia",
"estrelas",
"universo",
"bg-galaxy"
],
"category": "background",
"bundle": "backgrounds",
"description": "Campo 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#galaxy"
},
{
"name": "dither",
"aliases": [
"pontilhado",
"retro",
"bg-dither"
],
"category": "background",
"bundle": "backgrounds",
"description": "Degradê 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#dither"
},
{
"name": "grainient",
"aliases": [
"degrade-granulado",
"grao-degrade",
"bg-grainient"
],
"category": "background",
"bundle": "backgrounds",
"description": "Degradê 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#grainient"
},
{
"name": "beams",
"aliases": [
"feixes",
"colunas-de-luz",
"bg-beams"
],
"category": "background",
"bundle": "backgrounds",
"description": "Feixes 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#beams"
},
{
"name": "threads",
"aliases": [
"fios",
"linhas-flutuantes",
"bg-threads"
],
"category": "background",
"bundle": "backgrounds",
"description": "Fios 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#threads"
},
{
"name": "orb",
"aliases": [
"esfera",
"orbe",
"bg-orb"
],
"category": "background",
"bundle": "backgrounds",
"description": "Esfera 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#orb"
},
{
"name": "dark-veil",
"aliases": [
"veu-escuro",
"fumaca",
"bg-dark-veil"
],
"category": "background",
"bundle": "backgrounds",
"description": "Vé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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#dark-veil"
},
{
"name": "ripple-grid",
"aliases": [
"grade-ondulada",
"bg-ripple-grid"
],
"category": "background",
"bundle": "backgrounds",
"description": "Grade 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#ripple-grid"
},
{
"name": "hyperspeed",
"aliases": [
"velocidade-da-luz",
"tunel-de-luz",
"bg-hyperspeed"
],
"category": "background",
"bundle": "backgrounds",
"description": "Tú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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#hyperspeed"
},
{
"name": "topography",
"aliases": [
"topografia",
"curvas-de-nivel",
"bg-topography"
],
"category": "background",
"bundle": "backgrounds",
"description": "Curvas 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#topography"
},
{
"name": "radar",
"aliases": [
"radar-de-varredura",
"bg-radar"
],
"category": "background",
"bundle": "backgrounds",
"description": "Radar 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#radar"
},
{
"name": "color-bends",
"aliases": [
"curvas-de-cor",
"faixas-curvas",
"bg-color-bends"
],
"category": "background",
"bundle": "backgrounds",
"description": "Faixas 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#color-bends"
},
{
"name": "lightning",
"aliases": [
"relampago",
"raio",
"bg-lightning"
],
"category": "background",
"bundle": "backgrounds",
"description": "Relâ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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#lightning"
},
{
"name": "prism",
"aliases": [
"prisma",
"bg-prism"
],
"category": "background",
"bundle": "backgrounds",
"description": "Prisma: 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#prism"
},
{
"name": "balatro",
"aliases": [
"tinta-girando",
"redemoinho",
"bg-balatro"
],
"category": "background",
"bundle": "backgrounds",
"description": "Tinta 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#balatro"
},
{
"name": "light-pillar",
"aliases": [
"pilar-de-luz",
"coluna-de-luz",
"bg-light-pillar"
],
"category": "background",
"bundle": "backgrounds",
"description": "Pilar 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#light-pillar"
},
{
"name": "line-waves",
"aliases": [
"linhas-em-onda",
"ondas-de-linhas",
"bg-line-waves"
],
"category": "background",
"bundle": "backgrounds",
"description": "Linhas 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#line-waves"
},
{
"name": "faulty-terminal",
"aliases": [
"terminal-com-defeito",
"terminal",
"crt",
"bg-faulty-terminal"
],
"category": "background",
"bundle": "backgrounds",
"description": "Terminal 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.",
"params": {
"colors": {
"attribute": "data-vm-colors",
"attributeAliases": [],
"type": "string",
"default": "",
"description": "Até 3 cores separadas por vírgula (padrão: acento do tema e variações)."
},
"speed": {
"attribute": "data-vm-speed",
"attributeAliases": [
"data-vm-velocidade"
],
"type": "number",
"default": 1,
"description": "Velocidade da animação (1 = normal)."
},
"intensity": {
"attribute": "data-vm-intensity",
"attributeAliases": [],
"type": "number",
"default": 1,
"description": "Intensidade do brilho/cor (0 a 1,5)."
}
},
"example": "",
"playground": "https://ui.vatse.dev/motion/demo/laboratorio.html#faulty-terminal"
},
{
"name": "chart",
"aliases": [
"grafico",
"graficos",
"apex",
"dashboard-chart"
],
"category": "chart",
"bundle": "charts",
"description": "Grá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 \n ![\"\"](\"foto-1.jpg\")
![\"\"](\"foto-2.jpg\")
\n ![\"\"](\"foto-3.jpg\")
\n ![\"\"](\"foto-4.jpg\")
\n ![\"\"](\"foto-5.jpg\")
\n ![\"\"](\"foto-6.jpg\")
\n ![\"\"](\"foto-7.jpg\")
\n ![\"\"](\"foto-8.jpg\")
\n