Bento Grid

Accessibility

• Each grip is a labelled button, and its Move menu does everything a drag does.
• Moves are announced politely, with the new position.
• Tiles keep their order in the DOM, so reading order follows the layout.

Motion

• Pick up scales to 1.02 and tilts −3° in 200 ms, and the rest fade to 40%.
• A dashed slot shows where the tile lands.
• Drop springs to the slot in 400 ms, and the other tiles slide to their new cells together.
• Tiles move with transforms only, so nothing lays out per frame.
• With reduced motion, there is no lift or tilt: only the ring and the slot move.

Responsive behavior

• 664 px tray with three columns on Web.
• 358 px tray with two columns on Mobile. Uptime drops to Small and Storage moves up.
• Touch and hold a grip to pick a tile up.

Performance

• Reflow uses transforms only: measure, swap, then play each tile back from where it was.
• Drag position is a motion value, and window listeners exist only during a drag.
• Lifted tiles do not re-render per pointer move.

• Import BentoGrid from @/components/fetaui/bento-grid. Without tiles it shows BENTO_TILES.
• Tiles take small or medium. There is no large tile here, and a medium tile spans two of three columns.
• Save the order from onOrderChange. Nothing persists on its own, and the demo stores nothing.
• Every grip also opens a Move menu, for keyboard and screen readers. preview is for docs. Composes Bento Widget and Dropdown Menu.