---
title: "Bento Focus"
url: "https://sanyam.sh/lab/bento-focus"
date: "2026-10-03"
---

# Bento Focus

Press a tile, or drag it into the focus slot.

five gradient tiles on a bento grid with one large focus slot. press a small tile and it grows into the slot, or carry it there by hand while the grid makes room, and the focus tile dragged onto a small slot swaps with the tile there.

key insight: every tile is a window onto a picture laid out at the focus slot's size, so a tile that grows shows more of its picture rather than the same picture bigger, and the target's rim, the ball's flight and the holds only appear in the focus slot. its box is four motion values on one spring, so a drag and a press write the same values and a release carries the hand's speed.

hover is tested against the resting slots, so a hovered tile can grow into the gap without moving the edge that decides it. the arrow keys walk the grid by position.

- Reference: https://annnimate.com/animations/bento-focus
- Source: https://github.com/SanyamPunia/www/blob/main/components/labs/bento-focus/index.tsx