Small pieces, composed.Peças pequenas, compostas.

A primitive is one idea about motion, written as an HTML attribute and tuned with CSS custom properties. Every tile below renders live, shows the exact markup beside it and takes its status from the generated catalog: 144 presets, 11 Experimental.Uma primitiva é uma ideia sobre movimento, escrita como atributo HTML e ajustada com propriedades personalizadas do CSS. Cada bloco abaixo renderiza ao vivo, mostra a marcação exata ao lado e traz seu status do catálogo gerado: 144 presets, 11 Experimentais.

One primitive, tuned by variables.Uma primitiva, ajustada por variáveis.

Presets only set defaults. Every tile below is the same fade-up, changed by one custom property on the element. No new name, no new class.Presets só definem valores padrão. Cada bloco abaixo é o mesmo fade-up, alterado por uma propriedade personalizada no elemento. Nenhum nome novo, nenhuma classe nova.

↓ Scroll away and back to replay↓ Role para longe e volte para repetir

StableEstável

DistanceDistância--vl-distance-y: 3.5rem

fade-up

DurationDuração--vl-enter-duration: 1.6s

fade-up

DelayAtraso--vl-enter-delay: 700ms

fade-up

EasingEasing--vl-enter-ease: var(--vl-ease-spring)

fade-up

Delay is the choreography.O atraso é a coreografia.

A sequence is the same primitive with a growing --vl-enter-delay. For lists that should run when the parent mounts, vl-children="stagger" sets the delays from one attribute and --vl-stagger-step.Uma sequência é a mesma primitiva com um --vl-enter-delay crescente. Para listas que devem rodar quando o pai monta, vl-children="stagger" define os atrasos a partir de um atributo e de --vl-stagger-step.

↓ Scroll away and back to replay↓ Role para longe e volte para repetir

StableEstável

Six items, 110 ms apartSeis itens, 110 ms de intervalostyle="--vl-enter-delay:Nms"

0ms110ms220ms330ms440ms550ms

Read at the speed of the scroll.Leia na velocidade da rolagem.

Words fill with ink in order as the paragraph crosses the viewport. Each word is a direct child <span>. Without scroll timelines or with reduced motion, the text is simply fully inked.As palavras se preenchem de tinta em ordem conforme o parágrafo cruza a viewport. Cada palavra é um <span> filho direto. Sem timelines de rolagem ou com movimento reduzido, o texto simplesmente aparece todo preenchido.

↓ Scroll the paragraph through↓ Role o parágrafo até passar

vl-scroll="ink-scrub"ExperimentalExperimental

Motion is not a layer added after the design. It is part of the structure. You describe the intent in the markup, you tune it with a few custom properties, and the browser does the work it already knows how to do. Nothing here waits for a script to start.

Movimento não é uma camada adicionada depois do design. Ele faz parte da estrutura. Você descreve a intenção na marcação, ajusta com poucas propriedades personalizadas, e o navegador faz o trabalho que já sabe fazer. Nada aqui espera um script para começar.

CodeCódigo

<p vl-scroll="ink-scrub"><span>Motion</span> <span>is</span> …</p>

Mark the phrase that matters.Marque a frase que importa.

A marker sweeps behind a phrase as it crosses the viewport. Use <mark> so the emphasis is also semantic. --vl-highlight-height turns the fill into an underline.Um marcador varre atrás de uma frase conforme ela cruza a viewport. Use <mark> para que a ênfase também seja semântica. --vl-highlight-height transforma o preenchimento em sublinhado.

↓ Scroll the sentence into view↓ Role a frase até aparecer

vl-scroll="text-highlight"StableEstável

Velora is declarative, composable and native to the browser.O Velora é declarativo, composável e nativo do navegador.

CodeCódigo

<mark vl-scroll="text-highlight" style="--vl-highlight-height:.14em">composable</mark>

One variable font, one axis, one scroll.Uma fonte variável, um eixo, uma rolagem.

Outfit is a variable font, so weight moves from light to black while you scroll. Changing weight reflows text, so use it on one display line, never on body copy.Outfit é uma fonte variável, então o peso vai de light a black enquanto você rola. Mudar o peso reflui o texto; use em uma única linha de destaque, nunca em texto corrido.

↓ Scroll through the word↓ Role pela palavra

vl-scroll="text-scrub"ExperimentalExperimental

WeightPeso

CodeCódigo

<p vl-scroll="text-scrub">Weight</p>  /* --vl-scrub-from: 200 → --vl-scrub-to: 800 */

Two rows, opposite directions, no timer.Duas linhas, direções opostas, sem timer.

The rows travel with the scroll, so there is no continuous animation to pay for. One custom property, --vl-marquee-distance, sets how far and which way each row goes.As linhas viajam com a rolagem, então não há animação contínua para pagar. Uma propriedade personalizada, --vl-marquee-distance, define até onde e em que direção cada linha vai.

↓ Scroll past the band↓ Role pela faixa

vl-scroll="scroll-marquee"StableEstável

Attributes describe intent ✦ Channels enable composition ✦ Attributes describe intent ✦ Channels enable composition ✦Atributos descrevem a intenção ✦ Canais permitem a composição ✦ Atributos descrevem a intenção ✦ Canais permitem a composição ✦

Parameters tune it ✦ Scenes organize time ✦ Parameters tune it ✦ Scenes organize time ✦Parâmetros ajustam ✦ Cenas organizam o tempo ✦ Parâmetros ajustam ✦ Cenas organizam o tempo ✦

The full catalog.O catálogo completo.

The acts above teach the ideas. Below, every value of every channel is one tile with its exact markup, parameters and status from the generated catalog.Os atos acima ensinam as ideias. Abaixo, cada valor de cada canal é um bloco com a marcação exata, os parâmetros e o status do catálogo gerado.

Arrive as soon as it is in view.Chegue assim que estiver em vista.

Each tile is one value of vl-enter inside a vl-in-view gate. The gate plays the entrance when the tile reaches the viewport and resets it when the tile leaves.Cada bloco é um valor de vl-enter dentro de um portão vl-in-view. O portão toca a entrada quando o bloco chega à viewport e a reinicia quando ele sai.

Scroll past a row and back to replay itRole além de uma linha e volte para repeti-la

26 values in the catalog26 valores no catálogo

SCENE 01 · ARRIVECENA 01 · CHEGADA

Action. Every value takes its mark.Ação. Cada valor ocupa sua marca.

Reel A · Take 1on your markna sua marca

fade-upStableEstável

fade-up

CodeCódigo

<div vl-enter="fade-up">fade-up</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

slide-leftStableEstável

slide-left

CodeCódigo

<div vl-enter="slide-left">slide-left</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

scale-inStableEstável

scale-in

CodeCódigo

<div vl-enter="scale-in">scale-in</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

pop-inStableEstável

pop-in

CodeCódigo

<div vl-enter="pop-in">pop-in</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

blur-inStableEstável

blur-in

CodeCódigo

<div vl-enter="blur-in">blur-in</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

clip-riseStableEstável

clip-rise

CodeCódigo

<div vl-enter="clip-rise">clip-rise</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

mask-sweepStableEstável

mask-sweep

CodeCódigo

<div vl-enter="mask-sweep">mask-sweep</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

flow-inStableEstável

flow-in

CodeCódigo

<div vl-enter="flow-in">flow-in</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

cut-revealExperimentalExperimental

cut-reveal

CodeCódigo

<div vl-enter="cut-reveal">cut-reveal</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-cut-count --vl-cut-angleParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-cut-count --vl-cut-angle

Needs animation · Enhanced by mask-composite, @property, animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por mask-composite, @property, animation-timeline:view() · Movimento reduzido: estático

Chromium only so far. Without mask-composite it falls back to a plain fade.Só no Chromium por enquanto. Sem mask-composite, cai para um fade simples.

fade-up, tunedfade-up, ajustadoStableEstável

fade-up

CodeCódigo

<div vl-enter="fade-up"
  style="--vl-distance-y: 3.5rem;
         --vl-enter-duration: 1.6s;
         --vl-enter-delay: 400ms;
         --vl-enter-ease: var(--vl-ease-spring)">
  fade-up
</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

Same value, four custom properties. A sequence is the same primitive with a growing --vl-enter-delay.Mesmo valor, quatro propriedades personalizadas. Uma sequência é a mesma primitiva com um --vl-enter-delay crescente.

blur-liftStableEstável

blur-lift

CodeCódigo

<div vl-enter="blur-lift">blur-lift</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

depth-enterStableEstável

depth-enter

CodeCódigo

<div vl-enter="depth-enter">depth-enter</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

fade-downStableEstável

fade-down

CodeCódigo

<div vl-enter="fade-down">fade-down</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

fade-inStableEstável

fade-in

CodeCódigo

<div vl-enter="fade-in">fade-in</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

glide-inStableEstável

glide-in

CodeCódigo

<div vl-enter="glide-in">glide-in</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

reveal-3dStableEstável

reveal-3d

CodeCódigo

<div vl-enter="reveal-3d">reveal-3d</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: static · Also accepted as 3d-entryRequer animação · Movimento reduzido: estático · Também aceito como 3d-entry

reveal-cinematicStableEstável

reveal-cinematic

CodeCódigo

<div vl-enter="reveal-cinematic">reveal-cinematic</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

rise-3dStableEstável

rise-3d

CodeCódigo

<div vl-enter="rise-3d">rise-3d</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

slide-rightStableEstável

slide-right

CodeCódigo

<div vl-enter="slide-right">slide-right</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

spring-3dStableEstável

spring-3d

CodeCódigo

<div vl-enter="spring-3d">spring-3d</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

text-revealStableEstável

text-reveal

CodeCódigo

<div vl-enter="text-reveal">text-reveal</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

text-reveal-downStableEstável

text-reveal-down

CodeCódigo

<div vl-enter="text-reveal-down">text-reveal-down</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

text-reveal-upStableEstável

text-reveal-up

CodeCódigo

<div vl-enter="text-reveal-up">text-reveal-up</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

tilt-inStableEstável

tilt-in

CodeCódigo

<div vl-enter="tilt-in">tilt-in</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

unfoldStableEstável

unfold

CodeCódigo

<div vl-enter="unfold">unfold</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-yParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-distance-y

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

All 26 vl-enter values, 1 ExperimentalTodos os 26 valores de vl-enter, 1 Experimental

3d-entry blur-in blur-lift clip-rise cut-reveal (Experimental) depth-enter fade-down fade-in fade-up flow-in focus glide-in mask-sweep pop-in reveal-3d reveal-cinematic rise-3d scale-in slide-left slide-right spring-3d text-reveal text-reveal-down text-reveal-up tilt-in unfold

One parent sets the rhythm.Um pai define o ritmo.

vl-children puts the timing on the parent: each child gets its own delay without a custom property of its own. Every tile is one value on a parent with four children.vl-children coloca o tempo no pai: cada filho recebe seu próprio atraso sem uma propriedade personalizada própria. Cada bloco é um valor em um pai com quatro filhos.

Scroll past a row and back to replay itRole além de uma linha e volte para repeti-la

12 values in the catalog12 valores no catálogo

SCENE 02 · CASTCENA 02 · ELENCO

One call sheet, many entrances.Uma folha de chamada, várias entradas.

Reel A · Take 2on your markna sua marca

staggerStableEstável

One Two Three Four

Um Dois Três Quatro

CodeCódigo

<div vl-children="stagger" vl-stagger="140ms">
  <span vl-enter="fade-up">One</span>
  <span vl-enter="fade-up">Two</span>
  <span vl-enter="fade-up">Three</span>
  <span vl-enter="fade-up">Four</span>
</div>

DetailsDetalhes

Parameters --vl-stagger-step --vl-enter-duration --vl-enter-easeParâmetros --vl-stagger-step --vl-enter-duration --vl-enter-ease

The parent supplies the delays: 0, 140, 280, 420 ms. Children without their own channel get a default fade-up; vl-stagger takes 17 fixed steps, any other interval is --vl-stagger-step.O pai fornece os atrasos: 0, 140, 280, 420 ms. Filhos sem canal próprio recebem um fade-up padrão; vl-stagger usa 17 passos fixos, qualquer outro intervalo é --vl-stagger-step.

cascadeStableEstável

One Two Three Four

Um Dois Três Quatro

CodeCódigo

<div vl-children="cascade" vl-stagger="140ms">
  <span vl-enter="fade-up">One</span>
  <span vl-enter="fade-up">Two</span>
  <span vl-enter="fade-up">Three</span>
  <span vl-enter="fade-up">Four</span>
</div>

DetailsDetalhes

Parameters --vl-stagger-step --vl-enter-duration --vl-enter-easeParâmetros --vl-stagger-step --vl-enter-duration --vl-enter-ease

sequenceStableEstável

One Two Three Four

Um Dois Três Quatro

CodeCódigo

<div vl-children="sequence" vl-stagger="140ms">
  <span vl-enter="fade-up">One</span>
  <span vl-enter="fade-up">Two</span>
  <span vl-enter="fade-up">Three</span>
  <span vl-enter="fade-up">Four</span>
</div>

DetailsDetalhes

Parameters --vl-stagger-step --vl-enter-duration --vl-enter-easeParâmetros --vl-stagger-step --vl-enter-duration --vl-enter-ease

orchestrateStableEstável

One Two Three Four

Um Dois Três Quatro

CodeCódigo

<div vl-children="orchestrate" vl-stagger="140ms">
  <span vl-enter="fade-up">One</span>
  <span vl-enter="fade-up">Two</span>
  <span vl-enter="fade-up">Three</span>
  <span vl-enter="fade-up">Four</span>
</div>

DetailsDetalhes

Parameters --vl-stagger-step --vl-enter-duration --vl-enter-easeParâmetros --vl-stagger-step --vl-enter-duration --vl-enter-ease

waveStableEstável

One Two Three Four

Um Dois Três Quatro

CodeCódigo

<div vl-children="wave" vl-stagger="140ms">
  <span vl-enter="fade-up">One</span>
  <span vl-enter="fade-up">Two</span>
  <span vl-enter="fade-up">Three</span>
  <span vl-enter="fade-up">Four</span>
</div>

DetailsDetalhes

Parameters --vl-stagger-step --vl-enter-duration --vl-enter-easeParâmetros --vl-stagger-step --vl-enter-duration --vl-enter-ease

Needs motion-extendedRequer motion-extended

blur-cascadeStableEstável

One Two Three Four

Um Dois Três Quatro

CodeCódigo

<div vl-children="blur-cascade" vl-stagger="140ms">
  <span vl-enter="fade-up">One</span>
  <span vl-enter="fade-up">Two</span>
  <span vl-enter="fade-up">Three</span>
  <span vl-enter="fade-up">Four</span>
</div>

DetailsDetalhes

Parameters --vl-stagger-step --vl-enter-duration --vl-enter-easeParâmetros --vl-stagger-step --vl-enter-duration --vl-enter-ease

Needs motion-extendedRequer motion-extended

zoom-staggerStableEstável

One Two Three Four

Um Dois Três Quatro

CodeCódigo

<div vl-children="zoom-stagger" vl-stagger="140ms">
  <span vl-enter="fade-up">One</span>
  <span vl-enter="fade-up">Two</span>
  <span vl-enter="fade-up">Three</span>
  <span vl-enter="fade-up">Four</span>
</div>

DetailsDetalhes

Parameters --vl-stagger-step --vl-enter-duration --vl-enter-easeParâmetros --vl-stagger-step --vl-enter-duration --vl-enter-ease

Needs motion-extendedRequer motion-extended

cinema-staggerStableEstável

One Two Three Four

Um Dois Três Quatro

CodeCódigo

<div vl-children="cinema-stagger" vl-stagger="140ms">
  <span vl-enter="fade-up">One</span>
  <span vl-enter="fade-up">Two</span>
  <span vl-enter="fade-up">Three</span>
  <span vl-enter="fade-up">Four</span>
</div>

DetailsDetalhes

Parameters --vl-stagger-step --vl-enter-duration --vl-enter-easeParâmetros --vl-stagger-step --vl-enter-duration --vl-enter-ease

Needs motion-extendedRequer motion-extended

grid-waveStableEstável

One Two Three Four

Um Dois Três Quatro

CodeCódigo

<div vl-children="grid-wave" vl-stagger="140ms">
  <span vl-enter="fade-up">One</span>
  <span vl-enter="fade-up">Two</span>
  <span vl-enter="fade-up">Three</span>
  <span vl-enter="fade-up">Four</span>
</div>

DetailsDetalhes

Parameters --vl-stagger-step --vl-enter-duration --vl-enter-easeParâmetros --vl-stagger-step --vl-enter-duration --vl-enter-ease

Needs motion-extendedRequer motion-extended

spiral-staggerStableEstável

One Two Three Four

Um Dois Três Quatro

CodeCódigo

<div vl-children="spiral-stagger" vl-stagger="140ms">
  <span vl-enter="fade-up">One</span>
  <span vl-enter="fade-up">Two</span>
  <span vl-enter="fade-up">Three</span>
  <span vl-enter="fade-up">Four</span>
</div>

DetailsDetalhes

Parameters --vl-stagger-step --vl-enter-duration --vl-enter-easeParâmetros --vl-stagger-step --vl-enter-duration --vl-enter-ease

Needs motion-extendedRequer motion-extended

list-enterStableEstável

One Two Three Four

Um Dois Três Quatro

CodeCódigo

<div vl-children="list-enter" vl-stagger="140ms">
  <span vl-enter="fade-up">One</span>
  <span vl-enter="fade-up">Two</span>
  <span vl-enter="fade-up">Three</span>
  <span vl-enter="fade-up">Four</span>
</div>

DetailsDetalhes

Parameters --vl-stagger-step --vl-enter-duration --vl-enter-easeParâmetros --vl-stagger-step --vl-enter-duration --vl-enter-ease

Needs motion-extendedRequer motion-extended

list-enter-rightStableEstável

One Two Three Four

Um Dois Três Quatro

CodeCódigo

<div vl-children="list-enter-right" vl-stagger="140ms">
  <span vl-enter="fade-up">One</span>
  <span vl-enter="fade-up">Two</span>
  <span vl-enter="fade-up">Three</span>
  <span vl-enter="fade-up">Four</span>
</div>

DetailsDetalhes

Parameters --vl-stagger-step --vl-enter-duration --vl-enter-easeParâmetros --vl-stagger-step --vl-enter-duration --vl-enter-ease

Needs motion-extendedRequer motion-extended

Pick a temperament once.Escolha um temperamento uma vez.

vl-base sets duration, distance and easing for everything below it. The three tiles run the same vl-enter; only the base changes.vl-base define duração, distância e easing para tudo abaixo dele. Os três blocos rodam o mesmo vl-enter; só a base muda.

Scroll past a row and back to replay itRole além de uma linha e volte para repeti-la

3 values in the catalog3 valores no catálogo

SCENE 03 · TONECENA 03 · TOM

Same shot, three temperaments.Mesma cena, três temperamentos.

Reel A · Take 3on your markna sua marca

subtleStableEstável

subtle

CodeCódigo

<div vl-base="subtle" vl-enter="fade-up">subtle</div>

DetailsDetalhes

Parameters --vl-motion-duration --vl-motion-distance --vl-motion-easeParâmetros --vl-motion-duration --vl-motion-distance --vl-motion-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

balancedStableEstável

balanced

CodeCódigo

<div vl-base="balanced" vl-enter="fade-up">balanced</div>

DetailsDetalhes

Parameters --vl-motion-duration --vl-motion-distance --vl-motion-easeParâmetros --vl-motion-duration --vl-motion-distance --vl-motion-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

dramaticStableEstável

dramatic

CodeCódigo

<div vl-base="dramatic" vl-enter="fade-up">dramatic</div>

DetailsDetalhes

Parameters --vl-motion-duration --vl-motion-distance --vl-motion-easeParâmetros --vl-motion-duration --vl-motion-distance --vl-motion-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

All 3 vl-base valuesTodos os 3 valores de vl-base

balanced dramatic subtle

Leave as deliberately as you arrive.Saia com a mesma intenção com que chegou.

vl-exit mirrors vl-enter and takes the same three knobs. Each block waits 1.3 s inside the gate, then leaves, so the stage is empty afterwards.vl-exit espelha vl-enter e usa os mesmos três ajustes. Cada bloco espera 1,3 s dentro do portão e então sai, então o palco fica vazio depois.

Scroll away and back to replayRole para longe e volte para repetir

4 values in the catalog4 valores no catálogo

SCENE 04 · LEAVECENA 04 · SAÍDA

Cut. Leave the frame on purpose.Corta. Saia do quadro de propósito.

Reel B · Take 1on your markna sua marca

fade-outStableEstável

fade-out

CodeCódigo

<div vl-exit="fade-out" style="--vl-exit-delay: 1.3s">fade-out</div>

DetailsDetalhes

Parameters --vl-exit-delay --vl-exit-duration --vl-exit-easeParâmetros --vl-exit-delay --vl-exit-duration --vl-exit-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

fade-out-upStableEstável

fade-out-up

CodeCódigo

<div vl-exit="fade-out-up" style="--vl-exit-delay: 1.3s">fade-out-up</div>

DetailsDetalhes

Parameters --vl-exit-delay --vl-exit-duration --vl-exit-easeParâmetros --vl-exit-delay --vl-exit-duration --vl-exit-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

fade-out-downStableEstável

fade-out-down

CodeCódigo

<div vl-exit="fade-out-down" style="--vl-exit-delay: 1.3s">fade-out-down</div>

DetailsDetalhes

Parameters --vl-exit-delay --vl-exit-duration --vl-exit-easeParâmetros --vl-exit-delay --vl-exit-duration --vl-exit-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

shrink-outStableEstável

shrink-out

CodeCódigo

<div vl-exit="shrink-out" style="--vl-exit-delay: 1.3s">shrink-out</div>

DetailsDetalhes

Parameters --vl-exit-delay --vl-exit-duration --vl-exit-easeParâmetros --vl-exit-delay --vl-exit-duration --vl-exit-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

All 4 vl-exit valuesTodos os 4 valores de vl-exit

fade-out fade-out-down fade-out-up shrink-out

Let the scrollbar drive it.Deixe a barra de rolagem conduzir.

vl-scroll links an animation to scroll position through a native view or scroll timeline. Nothing runs on a timer, and nothing runs without scroll-driven animation support.vl-scroll liga uma animação à posição de rolagem por meio de uma view ou scroll timeline nativa. Nada roda em timer, e nada roda sem suporte a animações guiadas por rolagem.

Scroll slowly and watch each stage moveRole devagar e veja cada palco se mover

19 values in the catalog19 valores no catálogo

SCENE 05 · SCROLLCENA 05 · ROLAGEM

The scrollbar is the dolly.A barra de rolagem é o dolly.

Reel B · Take 2on your markna sua marca

parallaxStableEstável

parallax

CodeCódigo

<div vl-scroll="parallax">parallax</div>

DetailsDetalhes

Parameters --vl-range --vl-scroll-timelineParâmetros --vl-range --vl-scroll-timeline

Needs animation · Enhanced by animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por animation-timeline:view() · Movimento reduzido: estático

media-zoomStableEstável

media-zoom

CodeCódigo

<div vl-scroll="media-zoom">media-zoom</div>

DetailsDetalhes

Parameters --vl-range --vl-scroll-timelineParâmetros --vl-range --vl-scroll-timeline

Needs animation · Enhanced by animation-timeline:view() · Reduced motion: static · Also accepted as scroll-scaleRequer animação · Aprimorado por animation-timeline:view() · Movimento reduzido: estático · Também aceito como scroll-scale

rotate-scrollStableEstável

rotate-scroll

CodeCódigo

<div vl-scroll="rotate-scroll">rotate-scroll</div>

DetailsDetalhes

Parameters --vl-range --vl-scroll-timelineParâmetros --vl-range --vl-scroll-timeline

Needs animation · Enhanced by scroll-timeline, animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por scroll-timeline, animation-timeline:view() · Movimento reduzido: estático

scroll-marqueeStableEstável

Attributes describe intent ✦ Channels enable composition ✦ Attributes describe intentAtributos descrevem a intenção ✦ Canais permitem a composição ✦ Atributos descrevem a intenção

CodeCódigo

<p vl-scroll="scroll-marquee">Attributes describe intent ✦ Channels enable composition ✦ Attributes describe intent</p>

DetailsDetalhes

Parameters --vl-marquee-range --vl-marquee-distanceParâmetros --vl-marquee-range --vl-marquee-distance

Needs animation · Enhanced by scroll-timeline, animation-timeline:view() · Reduced motion: static · Also accepted as scroll-horizontalRequer animação · Aprimorado por scroll-timeline, animation-timeline:view() · Movimento reduzido: estático · Também aceito como scroll-horizontal

Travels with the page scroll, not on a timer.Viaja com a rolagem da página, não em um timer.

text-highlightStableEstável

Mark the phrase that matters as it crosses the viewport.Marque a frase que importa enquanto ela cruza a viewport.

CodeCódigo

<p>Mark the <mark vl-scroll="text-highlight">phrase that matters</mark> as it crosses the viewport.</p>

DetailsDetalhes

Parameters --vl-range --vl-scroll-timeline --vl-highlight-color --vl-highlight-heightParâmetros --vl-range --vl-scroll-timeline --vl-highlight-color --vl-highlight-height

Needs animation · Enhanced by animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por animation-timeline:view() · Movimento reduzido: estático

The preset paints its own marker (accent at 35%) and sweeps it; your own background-image replaces it.O preset pinta o próprio marcador (destaque a 35%) e o varre; o seu próprio background-image o substitui.

text-scrubExperimentalExperimental

Weight moves word by word

O peso se move palavra por palavra

CodeCódigo

<p vl-scroll="text-scrub">
  <span>Weight</span> <span>moves</span> <span>word</span>
  <span>by</span> <span>word</span>
</p>

DetailsDetalhes

Parameters --vl-scrub-from --vl-scrub-to --vl-scrub-rest --vl-scrub-stagger --vl-scrub-spanParâmetros --vl-scrub-from --vl-scrub-to --vl-scrub-rest --vl-scrub-stagger --vl-scrub-span

Needs animation · Enhanced by animation-timeline:view(), variable-font · Reduced motion: staticRequer animação · Aprimorado por animation-timeline:view(), variable-font · Movimento reduzido: estático

Chromium only so far. Animates font-weight, which reflows text: use it on one headline.Só no Chromium por enquanto. Anima font-weight, o que refaz o fluxo do texto: use em um único título.

ink-scrubExperimentalExperimental

Colour fills word by word

A cor preenche palavra por palavra

CodeCódigo

<p vl-scroll="ink-scrub"
   style="--vl-ink-from: var(--vl-text-muted);
          --vl-ink-to: var(--vl-color-accent)">
  <span>Colour</span> <span>fills</span> <span>word</span>
  <span>by</span> <span>word</span>
</p>

DetailsDetalhes

Parameters --vl-ink-from --vl-ink-to --vl-ink-rest --vl-scrub-stagger --vl-scrub-spanParâmetros --vl-ink-from --vl-ink-to --vl-ink-rest --vl-scrub-stagger --vl-scrub-span

Needs animation · Enhanced by animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por animation-timeline:view() · Movimento reduzido: estático

Chromium only so far. Animates colour only, so nothing reflows. Same word spans and timing knobs as text-scrub.Só no Chromium por enquanto. Anima apenas a cor, então nada refaz o fluxo. Mesmos spans de palavra e ajustes de tempo do text-scrub.

ring-scrollExperimentalExperimental

CodeCódigo

<div style="--vl-ring-count: 6" vl-scroll="ring-scroll">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

DetailsDetalhes

Parameters --vl-ring-count --vl-ring-width --vl-ring-gap --vl-ring-turn --vl-perspectiveParâmetros --vl-ring-count --vl-ring-width --vl-ring-gap --vl-ring-turn --vl-perspective

Needs animation · Enhanced by sibling-index(), animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por sibling-index(), animation-timeline:view() · Movimento reduzido: estático

Chromium only so far. The parent gets the perspective; the faces are the direct children.Só no Chromium por enquanto. O pai recebe a perspectiva; as faces são os filhos diretos.

letterboxExperimentalExperimental

CodeCódigo

<div style="--vl-letterbox-from: 14%" vl-scroll="letterbox">
  <img src="img/set-lights.jpg" alt="">
</div>

DetailsDetalhes

Parameters --vl-letterbox-from --vl-scroll-timeline --vl-rangeParâmetros --vl-letterbox-from --vl-scroll-timeline --vl-range

Needs animation · Enhanced by animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por animation-timeline:view() · Movimento reduzido: estático

Chromium only so far. Bars open as the element crosses the viewport; nothing is cropped without scroll timelines.Só no Chromium por enquanto. As barras se abrem conforme o elemento cruza a viewport; sem scroll timelines, nada é cortado.

defocusExperimentalExperimental

In focusEm foco

CodeCódigo

<h2 vl-scroll="defocus" style="--vl-blur-from: 10px">In focus</h2>

DetailsDetalhes

Parameters --vl-blur-from --vl-scroll-timeline --vl-rangeParâmetros --vl-blur-from --vl-scroll-timeline --vl-range

Needs animation · Enhanced by animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por animation-timeline:view() · Movimento reduzido: estático

Chromium only so far. Blur costs paint, so use it once per page. Pair with refocus for a rack focus.Só no Chromium por enquanto. Blur custa paint, então use uma vez por página. Combine com refocus para um rack focus.

refocusExperimentalExperimental

CodeCódigo

<img vl-scroll="refocus" src="img/set-lights.jpg" alt=""
     style="--vl-blur-from: 10px">

DetailsDetalhes

Parameters --vl-blur-from --vl-scroll-timeline --vl-rangeParâmetros --vl-blur-from --vl-scroll-timeline --vl-range

Needs animation · Enhanced by animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por animation-timeline:view() · Movimento reduzido: estático

Chromium only so far. Starts blurred and sharpens. Share one named timeline with defocus on the neighbour.Só no Chromium por enquanto. Começa desfocado e fica nítido. Compartilhe uma timeline nomeada com defocus no vizinho.

carousel · prev / nextcarrossel · anterior / próximoExperimentalExperimental

Card 1 of 3Cartão 1 de 3

Card 2 of 3Cartão 2 de 3

Card 3 of 3Cartão 3 de 3

CodeCódigo

<div vl-scroll-markers="buttons" tabindex="0"
     aria-label="Three cards">
  <section>Card 1 of 3</section>
  <section>Card 2 of 3</section>
  <section>Card 3 of 3</section>
</div>

DetailsDetalhes

Parameters --vl-scroll-item --vl-scroll-gap --vl-sbtn-size --vl-sbtn-inset --vl-sbtn-prev --vl-sbtn-nextParâmetros --vl-scroll-item --vl-scroll-gap --vl-sbtn-size --vl-sbtn-inset --vl-sbtn-prev --vl-sbtn-next

Needs ::scroll-button(), anchor-positioningRequer ::scroll-button(), anchor-positioning

A carousel with no script. vl-scroll-markers="buttons" is the value that adds previous and next buttons; the name is the attribute, not the label of a UI. Chromium only so far (::scroll-button). The core supplies the scroller: overflow, snapping and one column per child. Keep tabindex and aria-label in your HTML.Um carrossel sem script. vl-scroll-markers="buttons" é o valor que adiciona os botões anterior e próximo; o nome é o atributo, não o rótulo de uma UI. Só no Chromium por enquanto (::scroll-button). O core fornece o scroller: overflow, snapping e uma coluna por filho. Mantenha tabindex e aria-label no seu HTML.

cinema-zoomStableEstável

cinema-zoom

CodeCódigo

<div vl-scroll="cinema-zoom">cinema-zoom</div>

DetailsDetalhes

Parameters --vl-range --vl-scroll-timelineParâmetros --vl-range --vl-scroll-timeline

Needs animation · Enhanced by animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por animation-timeline:view() · Movimento reduzido: estático

crossfadeStableEstável

crossfade

CodeCódigo

<div vl-scroll="crossfade">crossfade</div>

DetailsDetalhes

Parameters --vl-range --vl-scroll-timelineParâmetros --vl-range --vl-scroll-timeline

Needs animation · Enhanced by animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por animation-timeline:view() · Movimento reduzido: estático

depth-driftStableEstável

depth-drift

CodeCódigo

<div vl-scroll="depth-drift">depth-drift</div>

DetailsDetalhes

Parameters --vl-range --vl-scroll-timelineParâmetros --vl-range --vl-scroll-timeline

Needs animation · Enhanced by animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por animation-timeline:view() · Movimento reduzido: estático

depth-pushStableEstável

depth-push

CodeCódigo

<div vl-scroll="depth-push">depth-push</div>

DetailsDetalhes

Parameters --vl-range --vl-scroll-timelineParâmetros --vl-range --vl-scroll-timeline

Needs animation · Enhanced by animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por animation-timeline:view() · Movimento reduzido: estático

pathStableEstável

path

CodeCódigo

<div vl-scroll="path">path</div>

DetailsDetalhes

Parameters --vl-range --vl-scroll-timelineParâmetros --vl-range --vl-scroll-timeline

Needs animation · Enhanced by offset-path, animation-timeline:scroll() · Reduced motion: staticRequer animação · Aprimorado por offset-path, animation-timeline:scroll() · Movimento reduzido: estático

revealStableEstável

reveal

CodeCódigo

<div vl-scroll="reveal">reveal</div>

DetailsDetalhes

Parameters --vl-range --vl-scroll-timelineParâmetros --vl-range --vl-scroll-timeline

Needs animation · Enhanced by animation-timeline:view() · Reduced motion: staticRequer animação · Aprimorado por animation-timeline:view() · Movimento reduzido: estático

All 19 vl-scroll values, 6 ExperimentalTodos os 19 valores de vl-scroll, 6 Experimentais

cinema-zoom crossfade defocus (Experimental) depth-drift depth-push ink-scrub (Experimental) letterbox (Experimental) media-zoom parallax path refocus (Experimental) reveal ring-scroll (Experimental) rotate-scroll scroll-horizontal scroll-marquee scroll-scale text-highlight text-scrub (Experimental)

Ambient motion, on a leash.Movimento ambiente, na coleira.

vl-loop-effect repeats until it leaves the screen: the in-view gate pauses it outside the viewport, and reduced motion or vl-motion="still" stops it everywhere. Use one accent, not a wall of them.vl-loop-effect se repete até sair da tela: o portão in-view o pausa fora da viewport, e movimento reduzido ou vl-motion="still" o interrompe em todo lugar. Use um destaque, não uma parede deles.

Each tile loops while it is on screenCada bloco repete enquanto está na tela

24 values in the catalog24 valores no catálogo

SCENE 06 · LOOPCENA 06 · LOOP

The projector never stops.O projetor nunca para.

Reel B · Take 3on your markna sua marca

floatStableEstável

float

CodeCódigo

<div vl-loop-effect="float">float</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

glow-breatheStableEstável

glow-breathe

CodeCódigo

<div vl-loop-effect="glow-breathe">glow-breathe</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

wobbleStableEstável

wobble

CodeCódigo

<div vl-loop-effect="wobble">wobble</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

rockStableEstável

rock

CodeCódigo

<div vl-loop-effect="rock">rock</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

morphStableEstável

morph

CodeCódigo

<div vl-loop-effect="morph">morph</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

spinStableEstável

spin

CodeCódigo

<div vl-loop-effect="spin">spin</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

shimmerStableEstável

shimmer

CodeCódigo

<div vl-loop-effect="shimmer">shimmer</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-direction --vl-shimmer-colorParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction --vl-shimmer-color

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

Paints its own band of light. With reduced motion it is the plain block.Pinta a própria faixa de luz. Com movimento reduzido, é o bloco simples.

aurora-driftStableEstável

aurora-drift

CodeCódigo

<div vl-loop-effect="aurora-drift">aurora-drift</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-direction --vl-aurora-from --vl-aurora-toParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction --vl-aurora-from --vl-aurora-to

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

Paints two drifting glows. With reduced motion the gradient stays still.Pinta dois brilhos à deriva. Com movimento reduzido, o gradiente fica parado.

shimmer-textStableEstável

shimmer-text

CodeCódigo

<h3 vl-loop-effect="shimmer-text">shimmer-text</h3>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

Paints a band of light across the glyphs, so it needs a large, heavy size to read. The base colour is --vl-text-primary. Use it on a headline, not on body text.Pinta uma faixa de luz sobre os glifos, então precisa de um tamanho grande e pesado para ser lida. A cor base é --vl-text-primary. Use em um título, não em texto corrido.

typewriter-loopStableEstável

typewriter-loop

CodeCódigo

<p vl-loop-effect="typewriter-loop" style="--vl-type-steps: 15">typewriter-loop</p>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-direction --vl-type-steps --vl-type-charsParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction --vl-type-steps --vl-type-chars

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

Types forward, then erases, forever. The reveal always ends at the real text width, so the word is never cut. --vl-type-steps sets how many characters appear per pass (match the character count to land on whole letters); --vl-type-chars overrides the width.Digita para frente, depois apaga, para sempre. A revelação sempre termina na largura real do texto, então a palavra nunca é cortada. --vl-type-steps define quantos caracteres aparecem por passada (iguale à contagem de caracteres para parar em letras inteiras); --vl-type-chars sobrescreve a largura.

orbitStableEstável

CodeCódigo

<i vl-loop-effect="orbit" style="--vl-orbit-radius: 2.2rem"></i>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-direction --vl-orbit-radiusParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction --vl-orbit-radius

Needs animation · Reduced motion: static · Also accepted as orbit-spinRequer animação · Movimento reduzido: estático · Também aceito como orbit-spin

swayExperimentalExperimental

sway

CodeCódigo

<div style="perspective: 600px">
  <div vl-loop-effect="sway" style="--vl-sway-angle: 28deg">sway</div>
</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-direction --vl-sway-angleParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction --vl-sway-angle

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

Chromium only so far. A swing about the Y axis through the individual rotate property, so it composes with your transform. It needs a perspective ancestor to read as depth.Só no Chromium por enquanto. Um balanço em torno do eixo Y pela propriedade individual rotate, então se combina com o seu transform. Precisa de um ancestral com perspective para parecer profundidade.

auroraStableEstável

aurora

CodeCódigo

<div vl-loop-effect="aurora">aurora</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

bounceStableEstável

bounce

CodeCódigo

<div vl-loop-effect="bounce">bounce</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

breatheStableEstável

breathe

CodeCódigo

<div vl-loop-effect="breathe">breathe</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

driftStableEstável

drift

CodeCódigo

<div vl-loop-effect="drift">drift</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

halo-breatheStableEstável

halo-breathe

CodeCódigo

<div vl-loop-effect="halo-breathe">halo-breathe</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

levitate-xStableEstável

levitate-x

CodeCódigo

<div vl-loop-effect="levitate-x">levitate-x</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

mesh-panStableEstável

mesh-pan

CodeCódigo

<div vl-loop-effect="mesh-pan">mesh-pan</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

pendulumStableEstável

pendulum

CodeCódigo

<div vl-loop-effect="pendulum">pendulum</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

pulse-ringStableEstável

pulse-ring

CodeCódigo

<div vl-loop-effect="pulse-ring">pulse-ring</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

rippleStableEstável

ripple

CodeCódigo

<div vl-loop-effect="ripple">ripple</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

spin-slowStableEstável

spin-slow

CodeCódigo

<div vl-loop-effect="spin-slow">spin-slow</div>

DetailsDetalhes

Parameters --vl-loop-duration --vl-loop-count --vl-loop-directionParâmetros --vl-loop-duration --vl-loop-count --vl-loop-direction

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

All 24 vl-loop-effect values, 1 ExperimentalTodos os 24 valores de vl-loop-effect, 1 Experimental

aurora aurora-drift bounce breathe drift float glow-breathe halo-breathe levitate-x mesh-pan morph orbit orbit-spin pendulum pulse-ring ripple rock shimmer shimmer-text spin spin-slow sway (Experimental) typewriter-loop wobble

Answer the pointer, then the keyboard.Responda ao ponteiro, depois ao teclado.

vl-hover reacts to the pointer. Give each control a visible :focus-visible state: the catalog lists which values also answer keyboard focus through their own rules, and the rest need yours.vl-hover reage ao ponteiro. Dê a cada controle um estado :focus-visible visível: o catálogo lista quais valores também respondem ao foco do teclado por regras próprias, e os demais precisam das suas.

Move the pointer over each control, or press Tab to reach itPasse o ponteiro sobre cada controle, ou use Tab para chegar a ele

7 values in the catalog7 valores no catálogo

SCENE 07 · TOUCHCENA 07 · TOQUE

The audience reaches in. The set answers.A plateia chega perto. O set responde.

Reel C · Take 1on your markna sua marca

hover-liftStableEstável

CodeCódigo

<button type="button" vl-hover="hover-lift">hover-lift</button>

DetailsDetalhes

Parameters --vl-transition-fast --vl-color-primaryParâmetros --vl-transition-fast --vl-color-primary

Needs animation, transition · Reduced motion: staticRequer animação, transition · Movimento reduzido: estático

hover-glowStableEstável

CodeCódigo

<button type="button" vl-hover="hover-glow"
  style="--vl-shadow-glow: 0 0 0 1px rgb(237 237 220 / .45),
                           0 0 28px rgb(237 237 220 / .3)">
  hover-glow
</button>

DetailsDetalhes

Parameters --vl-shadow-glowParâmetros --vl-shadow-glow

Needs animation, transition · Reduced motion: staticRequer animação, transition · Movimento reduzido: estático

The Velora Skin sets --vl-shadow-glow to none, so a bare hover-glow shows nothing there. Supply the glow you want, or use a Skin that defines it.A Skin Velora define --vl-shadow-glow como none, então um hover-glow puro não mostra nada nela. Forneça o brilho que quiser, ou use uma Skin que o defina.

border-traceStableEstável

CodeCódigo

<button type="button" vl-hover="border-trace">border-trace</button>

DetailsDetalhes

Parameters --vl-transition-fast --vl-color-primaryParâmetros --vl-transition-fast --vl-color-primary

Needs animation, transition · Reduced motion: staticRequer animação, transition · Movimento reduzido: estático

gradient-sweepStableEstável

CodeCódigo

<button type="button" vl-hover="gradient-sweep">gradient-sweep</button>

DetailsDetalhes

Parameters --vl-transition-fast --vl-color-primaryParâmetros --vl-transition-fast --vl-color-primary

Needs animation, transition · Reduced motion: staticRequer animação, transition · Movimento reduzido: estático

icon-shiftStableEstável

icon-shift

CodeCódigo

<a href="#hover" vl-hover="icon-shift"><span>icon-shift</span><span aria-hidden="true">→</span></a>

DetailsDetalhes

Parameters --vl-transition-fast --vl-color-primaryParâmetros --vl-transition-fast --vl-color-primary

Needs animation, transition · Reduced motion: staticRequer animação, transition · Movimento reduzido: estático

underline-expandStableEstável

underline-expand

CodeCódigo

<a href="#hover" vl-hover="underline-expand">underline-expand</a>

DetailsDetalhes

Parameters --vl-transition-fast --vl-color-primaryParâmetros --vl-transition-fast --vl-color-primary

Needs animation, transition · Reduced motion: staticRequer animação, transition · Movimento reduzido: estático

hover-sliceExperimentalExperimental

CodeCódigo

<button type="button" vl-hover="hover-slice">hover-slice</button>

DetailsDetalhes

Parameters --vl-cut-count --vl-cut-angle --vl-slice-gap --vl-slice-durationParâmetros --vl-cut-count --vl-cut-angle --vl-slice-gap --vl-slice-duration

Needs animation, transition · Enhanced by mask-composite, @property, animation-timeline:view() · Reduced motion: staticRequer animação, transition · Aprimorado por mask-composite, @property, animation-timeline:view() · Movimento reduzido: estático

Chromium only so far. Also opens on :focus-within. Without mask-composite the element stays whole.Só no Chromium por enquanto. Também abre em :focus-within. Sem mask-composite, o elemento permanece inteiro.

All 7 vl-hover values, 1 ExperimentalTodos os 7 valores de vl-hover, 1 Experimental

border-trace gradient-sweep hover-glow hover-lift hover-slice (Experimental) icon-shift underline-expand

Native state changes, animated.Mudanças de estado nativas, animadas.

vl-state animates state the browser already owns: an open <details>, an open popover, a checked checkbox. The state lives in HTML, so keyboard and assistive technology keep working.vl-state anima um estado que o navegador já controla: um <details> aberto, um popover aberto, um checkbox marcado. O estado vive no HTML, então teclado e tecnologias assistivas continuam funcionando.

Press Enter or Space on each controlPressione Enter ou Espaço em cada controle

5 values in the catalog5 valores no catálogo

SCENE 08 · STATECENA 08 · ESTADO

The set remembers where it was.O set lembra onde estava.

Reel C · Take 2on your markna sua marca

enter-exitStableEstável

Toggle the panelAlterne o painel

Fades and rises in, then leaves. Aparece com fade e sobe, depois sai.

CodeCódigo

<input type="checkbox" id="vls-ee">
<label for="vls-ee">Toggle the panel</label>
<div vl-state="enter-exit on-checked">
  Fades and rises in, then leaves.
</div>

DetailsDetalhes

Parameters --vl-state-duration --vl-state-ease --vl-state-distanceParâmetros --vl-state-duration --vl-state-ease --vl-state-distance

Needs animation, @starting-style · Reduced motion: staticRequer animação, @starting-style · Movimento reduzido: estático

No script: the checkbox is the state. A popover button or a script toggling hidden works the same way. on-checked is Experimental, Chromium only so far.Sem script: o checkbox é o estado. Um botão de popover ou um script alternando hidden funciona do mesmo jeito. on-checked é Experimental, só no Chromium por enquanto.

smoothStableEstável

Hover or focus mePasse o mouse ou foque em mim

CodeCódigo

<div vl-state="smooth" class="swatch" tabindex="0">Hover or focus me</div>
<style>
  .swatch { padding: 1.2rem 1.6rem; background: #EDEDDC; color: #0A0A09; }
  .swatch:is(:hover, :focus-visible) { background: #C8FF3D; scale: 1.12; rotate: -3deg; }
</style>

DetailsDetalhes

Parameters --vl-state-duration --vl-state-ease --vl-state-distanceParâmetros --vl-state-duration --vl-state-ease --vl-state-distance

Needs animation, @starting-style · Reduced motion: staticRequer animação, @starting-style · Movimento reduzido: estático

smooth only adds the transition (transform, translate, rotate, scale, opacity, colour, shadow, border colour). The change itself is your own rule, here a :hover / :focus-visible rule. Without vl-state="smooth" the same rule snaps instead of easing.smooth só adiciona a transição (transform, translate, rotate, scale, opacity, cor, sombra, cor da borda). A mudança em si é uma regra sua, aqui uma regra :hover / :focus-visible. Sem vl-state="smooth", a mesma regra salta em vez de suavizar.

expandStableEstável

Open the panelAbra o painel

The panel height animates from zero to its content size.A altura do painel anima de zero até o tamanho do conteúdo.

CodeCódigo

<details vl-state="expand">
  <summary>Open the panel</summary>
  <p>The panel height animates from zero to its content size.</p>
</details>

DetailsDetalhes

Parameters --vl-state-duration --vl-state-ease --vl-state-distanceParâmetros --vl-state-duration --vl-state-ease --vl-state-distance

Needs animation, @starting-style · Enhanced by calc-size(), @starting-style, animation-timeline:view() · Reduced motion: staticRequer animação, @starting-style · Aprimorado por calc-size(), @starting-style, animation-timeline:view() · Movimento reduzido: estático

top-layerStableEstável

Entry and exit run in the top layer.Entrada e saída rodam no top layer.

CodeCódigo

<button type="button" popovertarget="vls-pop">Open the popover</button>
<div id="vls-pop" popover vl-state="top-layer">
  <p>Entry and exit run in the top layer.</p>
</div>

DetailsDetalhes

Parameters --vl-state-duration --vl-state-ease --vl-state-distance --vl-state-exit-scaleParâmetros --vl-state-duration --vl-state-ease --vl-state-distance --vl-state-exit-scale

Needs animation, @starting-style · Reduced motion: staticRequer animação, @starting-style · Movimento reduzido: estático

All 5 vl-state values, 1 ExperimentalTodos os 5 valores de vl-state, 1 Experimental

enter-exit expand on-checked (Experimental) smooth top-layer

Text effects.Efeitos de texto.

Text presets across the effect and enter attributes. Word-level effects need the words as separate elements, so the markup carries one span per word.Presets de texto nos atributos effect e enter. Efeitos por palavra precisam das palavras como elementos separados, então a marcação traz um span por palavra.

Scroll away and back to replayRole para longe e volte para repetir

SCENE 09 · TITLESCENA 09 · TÍTULOS

Credits that write themselves.Créditos que se escrevem sozinhos.

Reel C · Take 3on your markna sua marca

text-reveal-upStableEstável

Markup first.Primeiro a marcação.

CodeCódigo

<h3 vl-enter="text-reveal-up">Markup first.</h3>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

text-reveal-downStableEstável

Then the rest.Depois o resto.

CodeCódigo

<h3 vl-enter="text-reveal-down">Then the rest.</h3>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

text-word-riseStableEstável

Words rise one by one

As palavras sobem uma a uma

CodeCódigo

<h3 vl-children="stagger" vl-stagger="120ms">
  <span vl-effect="text-word-rise">Words</span>
  <span vl-effect="text-word-rise">rise</span>
  <span vl-effect="text-word-rise">one</span>
  <span vl-effect="text-word-rise">by</span>
  <span vl-effect="text-word-rise">one</span>
</h3>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-stagger-step --vl-stagger-fitParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease --vl-stagger-step --vl-stagger-fit

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

The parent sets the rhythm with vl-children="stagger", the same rule as every other list: the step is the same --vl-stagger-step, and a long line tightens to fit --vl-stagger-fit instead of dragging, so there is no per-word delay to write.O pai define o ritmo com vl-children="stagger", a mesma regra de qualquer outra lista: o passo é o mesmo --vl-stagger-step, e uma linha longa se aperta para caber em --vl-stagger-fit em vez de se arrastar, então não há atraso por palavra para escrever.

text-line-revealStableEstável

A line wipes in.Uma linha entra em wipe.

CodeCódigo

<h3 vl-effect="text-line-reveal">A line wipes in.</h3>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

typewriterStableEstável

vl-enter="fade-up"

CodeCódigo

<p vl-effect="typewriter" style="--vl-type-steps: 18">vl-enter="fade-up"</p>

DetailsDetalhes

Parameters --vl-type-steps --vl-enter-delayParâmetros --vl-type-steps --vl-enter-delay

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

typewriter-softStableEstável

A softer typewriter.Uma máquina de escrever mais suave.

CodeCódigo

<p vl-effect="typewriter-soft">A softer typewriter.</p>

DetailsDetalhes

Parameters --vl-type-steps --vl-enter-delayParâmetros --vl-type-steps --vl-enter-delay

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

One-element effects.Efeitos de um só elemento.

vl-effect holds the presets that do not belong to one channel. These run on a single element. The effects that need a scroll, a scene or a component live on the page that teaches that.vl-effect guarda os presets que não pertencem a um canal. Estes rodam em um único elemento. Os efeitos que precisam de rolagem, de uma cena ou de um componente ficam na página que ensina isso.

Hover or press the tiles that reactPasse o mouse ou pressione os blocos que reagem

13 one-element effects13 efeitos de um só elemento

SCENE 10 · FXCENA 10 · FX

Effects department. One attribute each.Departamento de efeitos. Um atributo cada.

Reel D · Take 1on your markna sua marca

spring-upStableEstável

spring-up

CodeCódigo

<div vl-effect="spring-up">spring-up</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

zoom-blurStableEstável

zoom-blur

CodeCódigo

<div vl-effect="zoom-blur">zoom-blur</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

flip-inStableEstável

flip-in

CodeCódigo

<div vl-effect="flip-in">flip-in</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

hinge-downStableEstável

hinge-down

CodeCódigo

<div vl-effect="hinge-down">hinge-down</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

gradient-slideStableEstável

gradient-slide

CodeCódigo

<div vl-effect="gradient-slide">gradient-slide</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

gradient-text-colorStableEstável

gradient-text-color

CodeCódigo

<h3 vl-effect="gradient-text-color">gradient-text-color</h3>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

border-beamStableEstável

border-beam

CodeCódigo

<div vl-effect="border-beam">border-beam</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

sweep-borderStableEstável

sweep-border

CodeCódigo

<div vl-effect="sweep-border">sweep-border</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

glitch-liteStableEstável

glitch-lite

CodeCódigo

<div vl-effect="glitch-lite">glitch-lite</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

scanlineStableEstável

scanline

CodeCódigo

<div vl-effect="scanline">scanline</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

spotlightStableEstável

spotlight

CodeCódigo

<div vl-effect="spotlight">spotlight</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

pressStableEstável

press

CodeCódigo

<div vl-effect="press">press</div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

duotoneStableEstável

CodeCódigo

<div vl-effect="duotone"><img src="img/set-lights.jpg" alt=""></div>

DetailsDetalhes

Parameters --vl-enter-delay --vl-enter-duration --vl-enter-easeParâmetros --vl-enter-delay --vl-enter-duration --vl-enter-ease

Needs animation · Reduced motion: staticRequer animação · Movimento reduzido: estático

More vl-effect values live on Motion (7) · Scenes (5) · Components (11)Mais valores de vl-effect em Movimento (7) · Cenas (5) · Componentes (11)