Features
Feature Bento
Asymmetric grid where each card lights its own border under the cursor.
Everything you need, nothing you have to unlearn.
Plain Angular components in your own repository. No runtime to upgrade, no theme API to fight.
Motion that ships with the markup
Every interaction here is CSS and a pointer handler — no animation runtime, no bundle cost, and it degrades to a static section when the visitor asks for reduced motion.
- @keyframes
- mask-composite
- pointermove
- prefers-reduced-motion
Accessible underneath
Roles, focus order and keyboard paths come from the primitives, not from markup you have to remember to write.
Themed by tokens
Five colour presets, five shape presets, light and dark. Blocks inherit them because they never hard-code a colour.
Copy, do not install
The source lands in your repository. Rename it, gut it, keep it — nothing upstream can break it later.
Composed from real components
Buttons, cards, switches and avatars you already use, arranged. Nothing here is a one-off.
What moves
Each card carries a radial fill and a one-pixel gradient ring that follow the pointer inside that card, plus a lift on hover.
Block source
One 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.