Features
Scroll Story
Steps that stack as you scroll, in plain CSS — an ordinary list on small screens and with reduced motion.
How it works
From idea to shipped section in four moves.
Step 1: Describe the outcome
Start from what the visitor should be able to do, not from the screens. One sentence is enough.
Step 2: Compose from real parts
Assemble the section from components that already handle focus, state and theming.
Step 3: Check it in every theme
Semantic tokens mean the same markup holds up across presets, dark mode and your own palette.
Step 4: Ship the source
Copy the file, change the words, keep the behaviour. Nothing to install but what you already use.
What moves
Each card sticks and the next slides over it. Native scrolling is untouched, so nothing traps the page; below the md breakpoint or with reduced motion the cards simply flow.
Block source
pnpm add @voltui/componentsOne standalone component. Paste it into your project, point the imports at your Volt path, and wire the buttons to your own routes.
Every animation here is guarded by prefers-reduced-motion, and the colours come from theme tokens — try a different preset with the switcher in the header and the block follows.