Scene demo // Features
Card grids with staggered reveals and token-driven iconography.
Feature scenes communicate capabilities: responsive grids, orchestrated entry motion, and tiles that link out to deeper Library documentation.
Token-driven
Responsive
Staggered
Act I // Grid
Responsive columns with shared gap tokens keep feature tiles aligned.
Feature grids use auto-fit with a minimum column width token
so layouts reflow gracefully from mobile to wide desktop.
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--vl-col-min, 16rem), 1fr));
gap: var(--vl-gap-grid);
}
.feature-tile {
background: var(--vl-bg-surface);
border-radius: var(--vl-radius-xl);
}
var(--vl-gap-grid) and var(--vl-radius-xl) are shared layout tokens — update one value and every feature grid in the system reflows consistently.
Act II // Container scenes
Two independent scenes, one page, each responding to its own width.
Both demos below use the same internal grammar. The wide scene expands to a multi-column
layout, while the narrow scene collapses to a compact stack because vl-scene
is now the container-query boundary.
Wide scene
Editorial-width scene keeps a split composition and three-card grid.
This scene sits inside the same document as the compact scene, but its internal layout resolves from its own container size rather than the viewport.
3 columns
Because the scene container is wide enough.
Split layout
Copy and cards share the same local container.
Scoped rhythm
Spacing derives from scene-level variables.
Local reflow
Grid columns come from the scene width, not the page shell.
Same choreography
Existing scene motion stays intact because timelines are unchanged.
No leakage
Selectors stay rooted to the scene boundary, so sibling scenes keep their own rules.
Act II // Stagger
vl-children patterns for orchestrated entry animation.
Wrap the grid in vl-children="stagger" and each tile enters
with a cascading delay. No JavaScript, no keyframe authoring.
stagger markup
<section vl-children="stagger" vl-stagger="80ms">
<article vl-effect="fade-up">…</article>
<article vl-effect="fade-up">…</article>
</section>
Principle
Orchestrate, don’t animate.
Declare the pattern; the Motion API handles timing, intersection, and reduced-motion.
Act III // Content
Each tile links to deeper Library documentation.
Feature cards carry an icon, a headline, a short description, and a link to the canonical Library page so readers can dive into specifics.
Icon
Headline + description
Library link
Act IV // Applied features
Grid, stagger and content tiles: a reusable feature scene.
Set up the responsive grid, add staggered entry, and fill each tile with content that links back to the Library.