Direct the interface.Dirija a interface.
Cinema is the vocabulary of time: a frame, a cut, a camera that moves. Three presets already ship in the core. The rest are compositions on the same grammar, proposed for the core.Cinema é o vocabulário do tempo: um quadro, um corte, uma câmera que se move. Três presets já vêm no core. O resto são composições sobre a mesma gramática, propostas para o core.
Three presets that already direct a still.Três presets que já dirigem uma imagem estática.
Real vl-* attributes from the core stylesheet, running on the showcase photos. No script.Atributos vl-* reais da folha de estilo do core, rodando nas fotos do showcase. Sem script.
vl-scroll="parallax"vl-scroll="cinema-zoom"
vl-enter="reveal-cinematic"One cut for every image.Um corte para cada imagem.
Every cinema still on this site uses the same frame: one corner cut at the Velora angle (18.4° from vertical) and a 2px accent edge that follows the cut. Ratio, corner and size are the only things you change.Toda imagem de cinema deste site usa o mesmo quadro: um canto cortado no ângulo do Velora (18,4° da vertical) e uma borda de destaque de 2px que acompanha o corte. Proporção, canto e tamanho são as únicas coisas que você muda.
.cut-media.cut-media--blstyle="--cs: 30px"CodeCódigo
<div class="vl-media vl-media--16-9 cut-media">
<img src="…" alt="…">
</div>
/* --cs cut size, default 22px (the diagonal runs 3 × --cs down the edge)
--ce edge width, default 2px
modifier --bl moves the cut to the bottom-left corner */The crop is a clip-path polygon, so it works on any ratio and needs no image editing. Proposed for the core.O recorte é um polígono de clip-path, então funciona em qualquer proporção e não exige edição de imagem. Proposto para o core.
Scope to flat to wide, with a timecode.Do scope ao wide, com timecode.
The letterbox opens as you scroll while the photo pushes in. Two core primitives on one timeline: letterbox and cinema-zoom. The 24 fps timecode is page decoration, not Velora.O letterbox se abre conforme você rola enquanto a foto avança. Duas primitivas do core em uma timeline: letterbox e cinema-zoom. O timecode de 24 fps é decoração da página, não Velora.
One decision sequence, not an effect catalog.Uma sequência de decisão, não um catálogo de efeitos.
vl-scroll="letterbox"
A list that changes the picture.Uma lista que muda a imagem.
Each title swaps the backdrop with a cut, not a fade. Siblings dim so the chosen line reads first.Cada título troca o fundo com um corte, não um fade. Os irmãos escurecem para que a linha escolhida seja lida primeiro.
↓ Hover or focus a title↓ Passe o mouse ou foque em um títuloA carousel that behaves like film.Um carrossel que se comporta como filme.
Frames loop sideways on their own, tilted three degrees, with blurred edges so the film seems to come from nowhere and leave the same way. Pure CSS: one keyframe on a doubled track. It pauses on hover and stops entirely under reduced motion.Os quadros fazem loop para o lado por conta própria, inclinados três graus, com bordas desfocadas para que o filme pareça vir do nada e sair do mesmo jeito. CSS puro: um keyframe numa trilha duplicada. Pausa no hover e para por completo com movimento reduzido.
↓ Scroll past the strip↓ Role pela tiraA 3D ring of scenes.Um anel 3D de cenas.
Eight panels on a drum, one for each step of the Velora model. Scrolling rotates it 315 degrees, so every step faces you once.Oito painéis num tambor, um para cada passo do modelo Velora. Rolar o gira 315 graus, então cada passo fica de frente para você uma vez.
↓ Scroll. The ring turns.↓ Role. O anel gira.The camera is a keyframe.A câmera é um keyframe.
A pinned scene can fly a camera through a wireframe set built from CSS 3D planes, or turn it 360 degrees from the centre of a ring. Both run on the scene clock, with no script.Uma cena fixa pode voar uma câmera por um set wireframe feito de planos CSS 3D, ou girá-la 360 graus a partir do centro de um anel. Os dois rodam no relógio da cena, sem script.
Both scenes are live on the Scenes page.As duas cenas estão ao vivo na página Cenas.
Focus moves from the picture to the line.O foco passa da imagem para a linha.
The photo sharpens as the headline softens. It is a pure scroll-linked blur, so it costs paint. Use it once per page.A foto fica nítida enquanto o título suaviza. É um blur puro ligado à rolagem, então custa paint. Use uma vez por página.
↓ Scroll through the frame↓ Role pelo quadroDirected, not decorated.Dirigido, não decorado.
defocus + refocusClose the page like a film.Feche a página como um filme.
A vertical roll that loops on its own, like the end of a film, and fades at its edges. It pauses on hover. Under reduced motion it is a plain list.Um rolo vertical que faz loop sozinho, como o fim de um filme, e some nas bordas. Pausa no hover. Com movimento reduzido, é uma lista simples.
- Created byCriado por
- Erik Cardoso
- GrammarGramática
- Intent, Primitive, Channel, Parameter, SceneIntenção, Primitiva, Canal, Parâmetro, Cena
- EngineMotor
- HTML, CSS and the browserHTML, CSS e o navegador
- TypeTipografia
- Outfit, Manrope, JetBrains Mono
- Animation runtimeRuntime de animação
- None. Zero animation runtime JavaScript.Nenhum. Zero JavaScript de animação em runtime.
- StillsImagens
- The Velora showcase cinema setO conjunto de cinema do showcase Velora