The scroll is the timeline.A rolagem é a timeline.

vl-scroll ties a primitive to the scroll position instead of a timer. The element is scrubbed forward while you scroll down and back while you scroll up. Each block below is one value. Cinema zoom, the heavier camera move, is shown on the Cinema page.vl-scroll liga uma primitiva à posição de rolagem em vez de a um timer. O elemento avança enquanto você rola para baixo e volta quando rola para cima. Cada bloco abaixo é um valor. O cinema zoom, o movimento de câmera mais pesado, aparece na página Cinema.

vl-range decides which part of the element's pass through the viewport drives the motion. Every block below is the same reveal. Only the range changes, from a quick entry to the middle of the screen.vl-range decide qual parte da passagem do elemento pela viewport conduz o movimento. Cada bloco abaixo é o mesmo reveal. Só o intervalo muda, de uma entrada rápida até o meio da tela.

Each card is sticky. The one behind scales down and dims while the next covers it. The index of each card comes from :nth-child, so any number of cards works with no extra markup.Cada cartão é sticky. O de trás diminui e escurece enquanto o próximo o cobre. O índice de cada cartão vem de :nth-child, então qualquer quantidade de cartões funciona sem marcação extra.

The top shadow appears only after you scroll down, and the bottom one disappears at the end. It is four background layers, two of them attached to the content, so no event or observer is needed.A sombra de cima só aparece depois que você rola para baixo, e a de baixo some no fim. São quatro camadas de background, duas delas presas ao conteúdo, então não é preciso evento nem observer.

img-reveal opens from the centre with a small scale. wipe-reveal sweeps from the left edge. Both run while the element enters the viewport.img-reveal abre a partir do centro com uma pequena escala. wipe-reveal varre a partir da borda esquerda. Ambos rodam enquanto o elemento entra na viewport.

The page scrolls vertically and the track slides horizontally. Readers never touch a horizontal scrollbar, and the section pins while it plays. Each panel also turns toward the centre: it lies flat when it is centred and tilts more the farther it is from it.A página rola na vertical e a trilha desliza na horizontal. Ninguém precisa tocar numa barra de rolagem horizontal, e a seção fica fixa enquanto toca. Cada painel também se vira para o centro: fica plano quando está centralizado e inclina mais quanto mais longe dele.

Both strips are tied to the page scroll. The top one drifts right while the bottom one drifts left.As duas faixas estão ligadas à rolagem da página. A de cima desliza para a direita enquanto a de baixo desliza para a esquerda.

Every direct child has its own view timeline, so items animate in as each one enters the viewport. There is no shared stagger to maintain.Todo filho direto tem sua própria view timeline, então os itens animam conforme cada um entra na viewport. Não há stagger compartilhado para manter.

vl-motion rescales the shared timing, travel and easing tokens for a whole subtree. The markup inside is identical in all three.vl-motion reescala os tokens compartilhados de tempo, deslocamento e easing de toda uma subárvore. A marcação dentro é idêntica nos três.

These are plain CSS and HTML, not Velora attributes. They need a recent Chromium and fall back to an instant open and close elsewhere. Shown here as techniques Velora pages can use alongside the core.São CSS e HTML puros, não atributos do Velora. Precisam de um Chromium recente e, nos demais, abrem e fecham instantaneamente. Mostrados aqui como técnicas que páginas Velora podem usar junto com o core.

Navigating between pages uses the browser's View Transitions. One attribute on <html> picks the preset, and this site uses velora, diagonal blinds on the Cut angle. No script runs to animate it.A navegação entre páginas usa as View Transitions do navegador. Um atributo em <html> escolhe o preset, e este site usa velora, persianas diagonais no ângulo do Cut. Nenhum script roda para animar.

Header, side navigation, a player or a dock should not fade out and back in on every page. Give them a persistence class: the browser captures them as their own layer, so only the page content runs the transition while they stay put.Cabeçalho, navegação lateral, um player ou um dock não devem sumir e voltar a cada página. Dê a eles uma classe de persistência: o navegador os captura como camada própria, então só o conteúdo da página roda a transição enquanto eles ficam no lugar.