Bento Grid Feature Reveal

About this style

A bento grid lays out features as tiles of different sizes, like compartments in a lunch box, so a whole product can be scanned at a glance. In motion, each tile gets its own small demonstration, staggered so the eye can travel from one to the next. Product teams use it on launch pages and in feature films because it fits many benefits into one calm, ordered frame.

Make a 10-second bento-grid feature reveal: tiles assemble, each plays a tiny animation of one feature, then they fly together into the logo.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Lumen (a notes app)
- Tagline: "Notes that think with you."
- Six features: Instant search, Smart summaries, Live collaboration, End-to-end encrypted, Offline first, On every device
- Accent: #FF6B2C
- Length: 10 seconds
</inputs>

<direction>
- Palette: warm paper #F4F1EC; tiles #FFFFFF with a 1px #E6E1D8 border; ink #1C1B19; muted #77716A; accent #FF6B2C. One tile is filled ink (white text), one filled accent, the rest white.
- Type: Figtree. Titles 34px/600, top-left with 36px padding; body 22px/400; wordmark 120px/700, −0.03em.
- Grid: 4 × 3 in a 1680×900 area, 20px gaps, 28px radius. Search spans 2×1, Collaboration 1×2, Summaries 2×1; the rest are 1×1.
- Micro-animations, drawn with inline SVG and HTML (no icon packs):
  - Search: a field types "q3 roadmap"; three results slide in, match highlighted.
  - Summaries: a five-line grey paragraph collapses into three bullets.
  - Collaboration: named cursors (Ana, Theo) write into one paragraph.
  - Encrypted: text scrambles into ciphertext; a padlock shackle drops shut.
  - Offline: a sync arc sweeps around a cloud and resolves into a check.
  - Devices: a phone outline morphs into a laptop above "3 devices synced".
- Motion: tiles spring in (stiffness 260, damping 24, about 3% overshoot) from scale 0.9, y +60px and opacity 0, staggered diagonally 70 ms apart. Micro-animations last 1.2–2.2 s, start 0.3 s apart, play once and rest. The fly-together uses cubic-bezier(0.7, 0, 0.2, 1) over 0.9 s.
- Logo: a 2×2 cluster of rounded squares, top-right in accent. Four tiles become the squares; the other two slide beneath and vanish.
- Premium is tiles that read at a glance, staggers the eye can follow, and one rhythm across the grid.
Banned: emoji, stock icons, tile gradients, glassmorphism, shadows above 8% opacity, endlessly looping micro-animations, tiles moving in unison, real brand logos.
</direction>

<structure>
- 0.0–0.4: Empty paper.
- 0.4–1.8: Tiles assemble diagonally from the top-left.
- 1.8–2.4: Titles fade up, 50 ms apart.
- 2.4–6.6: Micro-animations play in feature order, each holding its end state.
- 6.6–7.0: Contents fade, leaving blank tiles.
- 7.0–8.0: Tiles shrink to 150px squares (radius 28 → 34px) and fly into the mark at center-left; gaps close to 12px.
- 8.0–8.8: The wordmark unmasks beside the mark; the tagline fades in below.
- 8.8–10.0: Hold.
For other lengths, give the micro-animations the extra time first; keep the logo resolve at least 3 s.
</structure>

<build>
- One self-contained index.html (inline CSS and JS) with a fixed 1920×1080 (16:9) stage scaled to fit the window; design for 60fps.
- window.seek(t), t in seconds, sets every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames. Randomness comes from a seeded PRNG; springs are closed-form functions of time.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser; with ?render, don't start that loop.
- Google Fonts via <link> are fine. Build it in HTML/CSS with inline SVG; no canvas or three.js needed.
</build>

<check>
Before showing me, screenshot seek(0) through seek(10), one frame per second, and look at each. Fix overlaps, clipped or cramped text, and anything generic. Every title must fit one line with room to spare, each micro-animation must read at rest, and the lockup must be optically centered. Confirm the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Liquid Glass Interface

Made by us

Glass panels with real refraction float over vivid, striped color: their rims bend what's behind them, two buttons fuse…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Fluid Spring Interface

Made by us

One black pill on a phone screen morphs into a notification, a live card and a music player on closed-form springs that…