Características
Feature Bento
Cuadrícula asimétrica donde cada tarjeta ilumina su propio borde bajo el 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.
Qué se mueve
Cada tarjeta lleva un relleno radial y un anillo degradado de un píxel que siguen al puntero dentro de esa tarjeta, más una elevación al pasar por encima.
Código del bloque
Un componente standalone. Pégalo en tu proyecto, apunta los imports a tu ruta de Volt y conecta los botones a tus propias rutas.
Cada animación aquí está protegida por prefers-reduced-motion, y los colores salen de los tokens del tema — prueba otro preset con el selector de la cabecera y el bloque lo sigue.