Works where you already are.Funciona onde você já está.

• 0 compiler issues on the Tailwind host example, 16 attributes0 problemas do compilador no exemplo de host Tailwind, 16 atributos
• 0.7 kB gzip of Tailwind CSS this panel needs0,7 kB de gzip de CSS Tailwind que este painel precisa
• motion-core only, in the real example: no Velora look is loadedapenas motion-core, no exemplo real: nenhum visual do Velora é carregado

<!-- Tailwind owns look. Velora owns motion. -->
<link rel="stylesheet" href="tailwind.css">          <!-- your utilities -->
<link rel="stylesheet" href="@veloracss.io/css/motion-core"> <!-- motion only -->

<h3 class="text-3xl font-semibold" vl-enter="text-reveal-up">…</h3>
<div class="grid gap-3 sm:grid-cols-3" vl-children="cascade" vl-stagger="120ms">
  <article class="rounded-xl bg-zinc-900 p-4 ring-1 ring-zinc-800"
           vl-hover="hover-lift">…</article>
</div>

• Velora motion-core · CSSVelora motion-core · CSS18.6 kB
• Velora core + extended · CSSVelora core + extended · CSS27.5 kB
• Velora full bundle · CSSVelora pacote completo · CSS53.0 kB
• GSAP 3.15 + ScrollTrigger · JSGSAP 3.15 + ScrollTrigger · JS44.6 kB

Brotli: motion-core 15.4 kB, core + extended 21.9 kB, full 41.7 kB, GSAP + ScrollTrigger 40.0 kB. Built with esbuild from packages/css/src.Brotli: motion-core 15,4 kB, core + extended 21,9 kB, completo 41,7 kB, GSAP + ScrollTrigger 40,0 kB. Gerado com esbuild a partir de packages/css/src.

• CSS, not JS: Velora's motion ships as a stylesheet; the script version ships JavaScript the browser must run firstCSS, não JS: o movimento do Velora chega como folha de estilo; a versão com script entrega JavaScript que o navegador precisa executar antes
• Scroll cost varies: main-thread work while scrolling changed a lot between runs, so no percentage is claimed hereCusto na rolagem varia: o trabalho da thread principal na rolagem mudou muito entre execuções, então nenhuma porcentagem é afirmada aqui
• 0 ms of script to start Velora's motion0 ms de script para iniciar o movimento do Velora

Limits: one scenario on one machine over localhost, so network time is not measured (see weight above). Velora had one long task at 4× while the stylesheet was parsed; GSAP had two. This says nothing about other scenes, other machines or real phones. The table is a single run; repeated runs varied widely, so read it as one sample, not a benchmark.Limites: um cenário em uma máquina via localhost, então o tempo de rede não é medido (veja o peso acima). O Velora teve uma tarefa longa a 4× enquanto a folha de estilo era interpretada; o GSAP teve duas. Isso não diz nada sobre outras cenas, outras máquinas ou celulares reais. A tabela é uma única rodada; repetições variaram muito, então leia como uma amostra, não como benchmark.

<!-- Velora page: stylesheet only, no script -->
<link rel="stylesheet" href="motion-core.min.css">
<article class="c" vl-enter="fade-up">…</article>   <!-- ×60 -->

<!-- Script page: same cards -->
<script src="gsap.min.js"></script><script src="ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);
  document.querySelectorAll(".c").forEach(c =>
    gsap.from(c, { opacity: 0, y: 24, duration: .6, ease: "power2.out",
      scrollTrigger: { trigger: c, start: "top 85%" } }));
</script>

• No runtime to shipNenhum runtime para entregarNothing to bundle, version or tree-shake for motion. It is a stylesheet.Nada para empacotar, versionar ou fazer tree-shake para o movimento. É uma folha de estilo.
• No build step requiredNenhuma etapa de build obrigatóriaThe Tailwind host example works from a link tag. A bundler is optional.O exemplo de host Tailwind funciona a partir de uma tag link. Um bundler é opcional.
• Checked in CIVerificado na CIThe compiler flags unknown or removed attributes before they reach a browser.O compilador sinaliza atributos desconhecidos ou removidos antes que cheguem a um navegador.
• Not measuredNão medidoAuthoring time and maintenance cost. We have no study, so no number is claimed.Tempo de autoria e custo de manutenção. Não temos estudo, então nenhum número é afirmado.

Looping motion is continuous. Use it sparingly and keep it off body text.Movimento em loop é contínuo. Use com moderação e não aplique em texto corrido.

AA for text is 4.5 : 1. Hairlines separate areas but never carry meaning alone, since controls also change fill or show a ring.AA para texto é 4,5 : 1. Os filetes separam áreas mas nunca carregam significado sozinhos, já que os controles também mudam o preenchimento ou mostram um anel.

<a class="vl-skip-link" href="#top">Skip to content</a>
<main id="top">…</main>

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }