PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Rolling Bento

A recursive bento grid layout that dynamically subdivides into multi-pane image cells with rolling vertical shutter transitions and scale zooms.

When to use

  • Photography portfolios, creative agency reels, and gallery showcases.
  • Dynamic bento grid layouts that expand and contract between single-column and multi-pane nested grids.
  • Rolling vertical shutter image reveals with coordinated zoom transitions.

When not to use

  • Static image grids where layout geometry should not move automatically.
  • Small thumbnail icons or avatars.

API Reference

RollingBentoProps

PropTypeDefaultDescription
imagesstring[]DEFAULT_IMAGESArray of image URLs to cycle through the rolling cells.
intervalMsnumber2000Duration in milliseconds between each layout morph step.
classNamestring—Additional CSS class names.

Motion

  • Dynamic flexGrow and gap transitions using smooth ease [0.16, 1, 0.3, 1].
  • Vertical shutter reveal (y: 100% -> 0%) layered over outgoing cell images.
  • Ken Burns entrance zoom (scale: 1.25 -> 1) when new images populate a bento cell.