Theme 055 · Signature directions

Bento Grid

Every frame is a 6×6 bento of white tiles — the feature-summary language of keynote slides and modern SaaS landing pages. One fixed shell (r16 · gap 16 · pad 28), one message and one micro-motion per tile; the seams between scenes are either diving into a tile or collapsing the whole grid into one.

readability ●●●trust ●●●effort med

01 · the question

How many dashboards did you check today?

open tabs

dashboards

Checkout · v4

Revenue (old)

Signups copy

error rate

0.4%

unowned

p95 latency

212 ms

friday · 17:40

And the drop still shipped.

alerts muted today12

1 · HOOK0:00–0:08

The question tile settles first (.92 → 1 + fade), then one pain tile per beat from largest to smallest, each sliding 24 px in from its nearest edge; on bar 3’s downbeat all coral badges light together and the grid shakes 4 px.

You ship.
Pulse watches.

Acme Pulse

2 · REVEAL0:08 (drop)

On the drop every tile is sucked to the centre and fuses into one hero tile; the seams remain as dashed ghost lines, the headline types in per word and the wordmark unmasks left→right one bar later.

You ship. Pulse watches.

your dashboard

signups+4%

active+1%

checkout−18%

p95212ms

errors0.4%

⚠ anomaly · checkout conversion

−18%

context

since 09:42 · after deploy #2231

watched

ev/s

2,418

your call

Roll backAcknowledge

3 · PROOF MOMENT0:12–0:32

The hero tile shrinks into the ink table and a teal scan band sweeps across it; side tiles tick green one per beat until the coral anomaly tile slams in (1.15 → 1) on the bar-9 downbeat, pushing its neighbours 8 px.

Acme Pulse

Caught before customers noticed.

GET STARTEDStart free →

metrics

resolved in

6 min

events/sec

2,418

4 · CTA0:36–0:45

Tiles rebuild large→small 70 ms apart (lockup → CTA shell → stats); the numbers count up over one bar and the CTA tile floods coral on the sting downbeat, then everything holds.

COMPONENT KIT

Shell — 6×6 grid, radius 16, gutter 16, inner padding 28 — never changes between scenes
Anchor tile — the frame’s single message, 2–4× the area of its neighbours
Giant number tile — one mono numeral 80–130 px that counts in
Ink table tile — the only dark tile: your data, crossed by a teal scan band
Anomaly tile — coral inset border + coral −18%; slams in and nudges its neighbours
Tile-zoom seam — dive into a tile to start the next scene, or collapse the grid into one hero tile

MOTION · MUSIC

Tile cascade — scale .92 → 1 + opacity, power2.out 0.4 s, 70 ms stagger large→small; big tiles on beats, small on off-beats
Micro-motion per tile — each tile owns one loop (count, sparkline draw, badge blink) lasting exactly 1 bar = 2 s at 120 BPM
Grid collapse — all tiles translate to centre + merge radii over 0.5 s expo.in, landing precisely on the drop

WHY / RISK · ADAPT IT

Bento is the most scannable way to show many capabilities at once, and a muted feed can read each tile as a separate caption. Risk: equal-weight tiles become a busy dashboard — insist on one anchor per frame and let empty tiles breathe.

Adapt to your product: Map each tile to one fact about your product (a metric, an integration, a screenshot crop) and keep a single “hero” tile per frame; the collapse/zoom seams work for any feature list.

References: https://www.saasframe.io/blog/the-bento-layout-trend (why the bento layout took over SaaS pages) · https://saaspo.com/style/bento (gallery of bento SaaS landing pages)