Bento Cascade

Cascade loops a vertical bento grid of images and videos forever, fading softly at the top and bottom. Place it beside a headline and a static hero becomes ambient motion that keeps working while the visitor reads.

Seamless loop. No snap or reset. The grid renders twice and travels exactly one loop period, so the second copy lands precisely where the first began. Speed is set in pixels per second, not duration, so pacing stays consistent regardless of tile count or row height.

Tiles and layout. Each tile takes one of four sizes: 1×1, 1×2 tall, 2×1 wide, or 2×2. The grid packs densely for a staggered bento rhythm. Run 1 to 4 columns, set row height, gap, and corner radius. Every tile accepts an image or video; add both and the image becomes the poster frame. Videos play muted, looped, and inline.

Two fade modes. Mask mode fades the column edges to transparent over any background. Colour mode paints a real gradient in your chosen colour. Set top and bottom depth independently.

Built to stay fast. Lazy loaded images and preload off videos keep performance smooth. Animation runs on the compositor, not the main thread. The component renders a frozen frame in the editor, thumbnails, and exports for responsive design. Reduced motion preferences are respected; pause on hover is optional and pointer only.

Where it works. Hero columns, gallery strips, logo walls, testimonials, portfolios, app screenshots, case studies, press mentions, anywhere quiet continuous movement is needed.

Setup. Place in a stack, set Width and Height to Fill, add tiles. Nine placeholders ship so it looks finished on arrival. Every property is exposed per breakpoint, phone can run fewer columns and a shallower fade without a second instance.