Можливості
Feature Bento
Асиметрична сітка, де кожна картка підсвічує власну рамку під курсором.
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.
Що рухається
Кожна картка має радіальну заливку й градієнтну рамку в один піксель, які стежать за вказівником усередині цієї картки, а також підіймається при наведенні.
Код блока
Один standalone-компонент. Вставте його у проєкт, спрямуйте імпорти на свій шлях до Volt і підключіть кнопки до власних маршрутів.
Кожну анімацію тут захищає prefers-reduced-motion, а кольори походять із токенів теми — оберіть інший пресет перемикачем у шапці, і блок піде за ним.