Bento Grid Reveal text animation: the word aimotions animated in this style
180InterfaceCSS

Bento Grid Reveal

Rounded bento-grid cards spring in one after another, three of them carrying the word in big, tightly tracked type. The rest run tiny feature demos (toggles, a chart, a timeline, a progress ring) in the modern landing-page look.

Prompt · replace [TEXT]

Tool-agnostic
Lay out a modern bento grid on an off-white page and reveal [TEXT] through it. Three rows of rounded cards with even gutters; the middle row splits [TEXT] across three wide cards (lime with ink text, near-black with white text, violet with white text) in a heavy, tightly tracked grotesque, each chunk sliding up inside its card. Around them, white cards run tiny feature demos: toggles that switch on, a line chart that draws itself, a big stat, overlapping color dots, a timeline with keyframe diamonds and a moving playhead, a progress ring and a spinning loop icon. Cards spring in one after another with a slight overshoot, hold, then lift away in sequence and loop.

Visual DNA

  • Off-white page with rounded cards in white, lime, ink and violet
  • Springy staggered entrance with a small overshoot and settle
  • The word split across three cards in heavy tightly tracked sans
  • Micro-animations inside cards: toggles, line chart, playhead, progress ring
  • Aligned grid edges and generous, even gutters
Category
Sci-fi UI & Modern Web
Demo built with
CSS
Energy
Lively
Background
Light bg

Also known as

Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Keys: ← → browse · C copy

Use this style

  1. Step 01Copy the prompt

    It describes the Bento Grid Reveal look (composition, type, palette, texture and timing) without tying you to a tool.

  2. Step 02Replace [TEXT]

    Swap in your word, product name or headline. Short words (4–12 letters) read best in most styles.

  3. Step 03Ask for a format

    Paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model, and request a single HTML file, a component, a shader or a brief. For a hero heading, use “Copy for website title”.

Website titles →Prompt guide →

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥