Bento Widget

Accessibility

• A region named by its label, with the number as the first line.
• The Notes and Storage bars are progress bars with values.
• The Uptime bars are one image named with the incident, and the warning bar is never the only signal at Large, where the incident is written out.
• Checkboxes are native, and a done note is struck through as well as dimmed.

Motion

• Values count up from 0 the first time they scroll into view, in 600 ms.
• Bars grow with a 20 ms stagger and the line draws left to right.
• Hover moves the ring to tertiary and the grip from 30% to 70%. Nothing moves until a drag.
• Checking a note dims and strikes the text in 200 ms, and the progress bar follows.
• With reduced motion, values show their final number and nothing grows.

Responsive behavior

• 216, 436 and 656 by 176 px on Web.
• 173 and 350 by 168 px on Mobile, and Large is 350 by 280 px.
• On Mobile, Revenue moves its breakdown under the chart, Active users grows its bars to 120 px and Notes becomes one column.

Performance

• Charts animate once on entering the viewport, with whileInView.
• Numbers count by writing text directly, so they never re-render per frame.
• Each size renders only its own parts, so Small mounts no chart.

• Import BentoWidget from @/components/fetaui/bento-widget. Without data it shows BENTO_DATA.
• widget picks the content and the shape of data. size is small, medium or large.
• Revenue points are y positions in a 40 px box, where 0 is the top. They are not amounts.
• fill makes it take its cell. grip replaces the dots but moves nothing alone: use Bento Grid. Composes Card and Checkbox.