BTN_ACTUATOR_01
200ms
Primary trigger
Buttons compress, brighten and recover with a single state model shared across the framework.
Task 03 // Architecture Sequence
A cinematic blueprint for how the framework holds together.
Velora uses a technical shell, browser-native surfaces and explicit transition logic so large pages still feel authored instead of stitched together. The architecture is visible as a live stage, not just a set of notes.
shell + canvas
tonal hierarchy
actuator states
view transitions
architecture.map
sidebar -> canvas -> scenes -> actuators -> transitions
Scene 02 // Tonal Stack
Depth is defined by materials, not ornamental shadow.
The stack scene shows how base, container and elevated layers create structure across a full-canvas interface while leaving room for content and motion to read clearly.
Tonal instruction
Three layers, one surface language.
OKLCH-based deltas keep the shell readable without collapsing the page into boxed panels.
/* Three-layer tonal depth */
.shell { background: var(--vl-bg-main); }
.panel { background: var(--vl-bg-surface); }
.card { background: var(--vl-bg-elevated); }
Each step up is a single OKLCH lightness delta — the system auto-derives every shelf from the base hue so the stack stays coherent across all themes.
Scene 03 // Actuators
Controls behave like tuned mechanical parts.
Buttons, inputs and overlays all inherit the same resistance model so interaction stays coherent across routes and shells.
FIELD_ACTUATOR_02
focus
Input shell
Focus states live in the component contract instead of being re-authored per route.
Overlay handshake
4ms
Dialogs inherit stack, tone and motion primitives.
Actuators stay lightweight because the framework already defines the surfaces, transitions and interaction cadence underneath.
Scene 04 // Transitions + View Logic
Page transitions preserve context instead of cutting between disconnected states.
Shared view logic lets the framework move from source to target with continuity while staying out of the main thread.
System Modules
Shared elements interpolate through the handoff group.
::view-transition-group keeps orientation, hierarchy and motion ownership aligned.