Velora CSS

Motion is a property of the markup.Movimento é uma propriedade da marcação.

Attributes describe what you want. CSS and the browser do the work. Zero animation runtime JavaScript.Atributos descrevem o que você quer. CSS e o navegador fazem o trabalho. Zero JavaScript de animação em runtime.

EnterEntrada

Ways to bring an element in.Formas de trazer um elemento para a cena.

PrimitivesPrimitivas

Loop

Ambient movement that stays out of the way.Movimento ambiente que não atrapalha.

PrimitivesPrimitivas

Hover

Responses to the pointer and the keyboard.Respostas ao ponteiro e ao teclado.

PrimitivesPrimitivas

ExitSaída

Ways to take an element out.Formas de tirar um elemento de cena.

PrimitivesPrimitivas

StateEstado

Native HTML states, animated: popover, details, checked.Estados nativos do HTML, animados: popover, details, checked.

PrimitivesPrimitivas

ScrollRolagem

Driven by the browser's own scroll timeline, with no script.Conduzido pela própria timeline de rolagem do navegador, sem script.

MotionMovimento

Page transitionTransição de página

Cross-page presets: wipe, glide, iris, cinema, snap.Presets entre páginas: wipe, glide, iris, cinema, snap.

MotionMovimento

SceneCena

Ready-made scene recipes: hero, story, bento, product.Receitas de cena prontas: hero, story, bento, product.

ScenesCenas

EffectsEfeitos

One-element effects with no channel of their own.Efeitos de um só elemento, sem canal próprio.

PrimitivesPrimitivas

Base

Page-wide motion level: subtle, balanced, dramatic.Nível de movimento da página inteira: sutil, equilibrado, dramático.

PrimitivesPrimitivas

Counts come from the generated catalog: 144 presets across ten groups. The numbers use the Velora CSS counter technique (@property integer + counter(), scroll-driven, each with its own range).As contagens vêm do catálogo gerado: 144 presets em dez grupos. Os números usam a técnica de contador do Velora CSS (@property integer + counter(), guiada por rolagem, cada um com seu próprio intervalo).

Six steps from intent to browser.Seis passos da intenção ao navegador.

Each step is one screen. The stage stays pinned while the shared clock advances.Cada passo é uma tela. O palco fica fixo enquanto o relógio compartilhado avança.

↓ Scroll slowly↓ Role devagar

ExistingExistenteCuts: CollectionCortes: Coleção

Step 1 of 6Passo 1 de 6

IntentIntenção

Say what the page should feel like.Diga como a página deve parecer.

I want this heading to rise in.Quero que este título suba ao entrar.

Step 2 of 6Passo 2 de 6

PrimitivePrimitiva

Pick one small, named move.Escolha um movimento pequeno e nomeado.

clip-rise

Step 3 of 6Passo 3 de 6

ChannelCanal

Choose when it happens.Escolha quando acontece.

<h2 vl-enter="clip-rise">…</h2>

Step 4 of 6Passo 4 de 6

ParameterParâmetro

Tune it with a custom property.Ajuste com uma propriedade personalizada.

<h2 vl-enter="blur-in"
    style="--vl-blur-from: 12px">…</h2>

Step 5 of 6Passo 5 de 6

SceneCena

Organize time across elements.Organize o tempo entre elementos.

<section vl-scene vl-pin="6" vl-scrub>
  <h2 vl-enter="clip-rise" vl-act="1">…</h2>
</section>

Step 6 of 6Passo 6 de 6

BrowserNavegador

Masks, scroll timelines and custom properties. Nothing to run.Máscaras, timelines de rolagem e propriedades personalizadas. Nada para executar.

animation-timeline: view();

Channels compose on one element.Canais se combinam em um único elemento.

Each channel owns a different CSS property, so they stack as layers on one element without overwriting each other.Cada canal controla uma propriedade CSS diferente, então eles se empilham como camadas em um elemento sem se sobrescrever.

↓ Switch each channel. Hover or click the card. The markup follows.↓ Alterne cada canal. Passe o mouse ou clique no cartão. A marcação acompanha.

CollectionColeção

EnterEntradamask-image Looptransform Hovertranslate StateEstadobackground-color

SceneCenaComposeCompor

<article class="card"  vl-enter="cut-reveal"  vl-loop-effect="float"  vl-hover="hover-lift"  vl-state="smooth">

Direct the interface like a film.Dirija a interface como um filme.

Three presets already in the core, running on real stills: parallax, cinema zoom and a cinematic reveal. Past them, a reel and a film strip in page CSS, plus ring-scroll (Experimental).Três presets já no core, rodando em imagens reais: parallax, cinema zoom e uma revelação cinematográfica. Além deles, um reel e uma tira de filme em CSS da página, mais ring-scroll (Experimental).

Open CinemaAbrir Cinema

ExistingExistenteExperimentalExperimental

Film lights on a set — ParallaxParallax`vl-scroll="parallax"`

An empty cinema auditorium — Cinema zoomCinema zoom`vl-scroll="cinema-zoom"`

A vintage film projector — Reveal cinematicRevelação cinematográfica`vl-enter="reveal-cinematic"`

Type that arrives on cue.Tipografia que chega na deixa.

Text and in-view presets are in the core. The Cut adds weight and ink on scroll, highlights and a marquee.Os presets de texto e de entrada em vista estão no core. O Cut adiciona peso e tinta na rolagem, destaques e um marquee.

Open PrimitivesAbrir Primitivas

ExistingExistenteExperimentalExperimental

Attributes describe intent.

Atributos descrevem a intenção.

Cards and carousels.Cartões e carrosséis.

The core carousel, fan, stack and cover flow, plus the Velora Cut family: Cut Carousel, Spec Cards, Hover Slice and Ticket Slider.O carrossel, leque, pilha e cover flow do core, mais a família Velora Cut: Cut Carousel, Spec Cards, Hover Slice e Ticket Slider.

Open ExamplesAbrir Exemplos

ExistingExistenteExperimentalExperimental

Cut familyFamília CutCut CarouselCut Carousel

Slides uncovered by the Cut.Slides revelados pelo corte.

Cut familyFamília CutSpec CardsSpec Cards

A cut corner, hatching on hover.Um canto cortado, hachura no hover.

CoreCoreBanner carouselCarrossel de banner

Radios and :has(), no script.Radios e :has(), sem script.

CoreCoreFan and stackLeque e pilha

One attribute per hover effect.Um atributo por efeito de hover.

Everything that ships.Tudo o que já vem no pacote.

The scene engine, structural components, authoring tools and proof of integration each have a page.O motor de cenas, os componentes estruturais, as ferramentas de autoria e a prova de integração têm uma página cada.

ExistingExistente

Pick where to go next.Escolha para onde ir.

Four destinations, four cuts. Each card is a real link and works with the keyboard.Quatro destinos, quatro cortes. Cada cartão é um link real e funciona com o teclado.

↓ Hover, focus or press a card↓ Passe o mouse, foque ou pressione um cartão

CollectionColeção

Mental modelModelo mentalLearnAprender Flagship proofProva principalScenesCenas Author and testCriar e testarLab Real sitesSites reaisExamplesExemplos

The same page, with and without support.A mesma página, com e sem suporte.

Velora enhances progressively. Where a feature is missing, the content is still there. Motion can also be turned off with vl-motion="still".O Velora melhora progressivamente. Onde um recurso não existe, o conteúdo continua lá. O movimento também pode ser desligado com vl-motion="still".

↓ Move the cut↓ Mova o corte

CollectionColeção

NativeNativo SplitDividido FallbackFallback

Cut Reveal · hairline maskCut Reveal · máscara fina

Browser supportSuporte de navegadores PerformancePerformance Reduced motionMovimento reduzido

Install it, then read the markup.Instale e depois leia a marcação.

The package is a launch preview. The examples below mix a real project, host types and a planned tool.O pacote é uma prévia de lançamento. Os exemplos abaixo misturam um projeto real, tipos de host e uma ferramenta planejada.

Add the stylesheet, write attributes on your HTML. No animation runtime to load.Adicione a folha de estilo e escreva atributos no seu HTML. Nenhum runtime de animação para carregar.

Launch previewPrévia de lançamento

npm install @veloracss.io/css

<h1 vl-enter="clip-rise">Hello</h1>

SKIF BrasilWordPress · custom plugin · reported by the authorWordPress · plugin próprio · relatado pelo autor
Plain HTMLHTML puroOne stylesheet · attributes onlyUma folha de estilo · só atributos
Any frameworkQualquer frameworkHost-agnostic markupMarcação independente de host
Velora MCPPlanned · read-only firstPlanejado · somente leitura primeiro

Same markup, another voice.Mesma marcação, outra voz.

A Skin is the design system in data form. Switching it changes colour, type and structure together. Skins stay outside the motion grammar.Uma Skin é o design system em forma de dados. Trocá-la muda cor, tipografia e estrutura juntas. As Skins ficam fora da gramática de movimento.

Try the Skin previewExperimente a prévia de Skins

FreeGrátis

Velora

The official skin. Olive primary, cut structure. Experimental.A skin oficial. Oliva como cor principal, estrutura em corte. Experimental.

Planned motion · The cut slidesMovimento planejado · O corte desliza

FreeGrátis

Noir

High contrast, editorial.Alto contraste, editorial.

Planned motion · Letterbox lightMovimento planejado · Luz de letterbox

FreeGrátis

Earth

Warm and grounded.Quente e com os pés no chão.

Planned motion · Breathes, bubbles upMovimento planejado · Respira, borbulha

Premium · waitlistPremium · lista de espera