Core · enter + hoverSkin · surface + type
Enter · fade-up
Component intelligence
A product card combines semantic content with independent entry and interaction channels.
3Channels
LiveElements // state has a lifecycle
The scene lives inside the page.
Native elements carry their own lifecycle — open, focus, expand, top-layer — while Velora channels handle entry, hover and scroll independently. Hover the card below; tab through the form; open the popover.
No component runtime. Each demo is plain HTML + vl-* attributes you can copy into any host.
Act 02 // try enter + hover
Scroll into view. Hover for depth.
Each card stacks channels — vl-enter on scroll, vl-hover on intent — without one overwriting the other.
Core entry + hover channelsSkin type + surface + rhythmShowcase element families
Core · revealSkin · editorial rhythm
“Motion is useful when it clarifies hierarchy before it asks for attention.”
Quote, divider, kicker and status retain their hierarchy in every Skin.
Act 03 // focus is motion
Tab through controls. Watch focus material respond.
Keyboard-first: every control below is operable without a mouse. Skin owns geometry; Core owns focus and state timing.
Native form stack
Standard controls keep semantics; Velora adds focus choreography and custom select where supported.
Motion policy controls
Checkbox, radio, toggle and range remain keyboard-operable and visibly focused.
Act 04 // inspect and decide
The platform owns interaction. Velora owns the voice.
Click Open context · Review scene · expand accordion · focus Why channels? for the tooltip.
Core display + overlay transitionsSkin top-layer materialShowcase review decisions
Anchored release context
Popover state and dismissal remain native; anchor positioning enhances placement.
Core
Entry, exit, overlay and discrete display are coordinated by CSS.
<button popovertarget="ctx">Open</button> <div id="ctx" popover vl-state="top-layer enter-exit"> … </div>
Approve the scene
commandfor can open a native dialog without an application controller where supported.
Baseline: Scene 07 is ready for review. The command opens the richer top-layer version where supported.
<button commandfor="scene-dialog" command="show-modal"> Review </button> <dialog id="scene-dialog" vl-state="top-layer">…</dialog>
Inspect ownership
What does Core own?
Behavior, lifecycle, fallbacks and reduced motion. The active Skin owns geometry, surface and timing voice.
<details class="vl-accordion" vl-state="expand"> <summary>Inspect</summary> <div class="vl-accordion__content">…</div> </details>
Find a motion recipe
Type in the search field; tab to Why channels? for hover/focus tooltip feedback.
Why channels?Each behavior keeps an independent transform contribution.
<input class="vl-command__input" type="search" /> <span class="vl-tooltip-trigger" tabindex="0"> Why channels? <span class="vl-tooltip">Independent channels.</span> </span>
Act 05 // confirm the system
Motion should communicate system status.
Core status timing + reductionSkin semantic color + materialShowcase sync and loading states
Release synchronized
Scene tokens updated
Four Skins now consume the same semantic contract.
Useful waiting states
Act 06 // follow progress
Progress can follow geometry or reading order.
Core path + scroll progressSkin track + marker voiceShowcase category journey
Native motion path
offset-path provides geometry; the view timeline provides progress.
Snap, markers, semantics
Markers progressively enhance a keyboard-scrollable, snap-based list.
Arrival and reveal.
Lifecycle and change.
Shared narrative clock.