Jason ZhuJasonZhu.AI
中
Product & ads枯白啃设计 @Kubai0872026-10-280:20

Animated bento feature grid for a product site

Views
8.8K
Likes
170
Replies
9
Saves
199

Animated bento feature grid for a product website, where each tile plays a small scene showing what the feature does. Generated with Opus 5.5 from a detailed prompt the creator shares in the post.

Full prompt5,215 chars

# Small animations for a product site's feature tiles

Give every tile in my site's feature grid a small animation: a tiny scene that shows what the feature does.

## 0. Before you build
- Read the project: find out the tech stack (plain HTML/CSS, React, Vue, Svelte, Astro, Tailwind, Framer Motion…) and build it the way the project already does. Don't add an animation library unless the project already uses one.
- Ask me which look to use:
A. The Lumno material below, as written.
B. My product's own style: take the colors, radii, borders and shadows from my existing design tokens and components, and keep only the structure and motion rules from this prompt.
C. A mix: the Lumno material in my brand's accent color and radii.
- Picking features: if I named features, animate those. If not, read the product's site, docs or code, list 3–5 features that a short scene can explain, and let me pick.

## 1. Lumno material (option A)
Overall: quiet, neutral, precise. Hairlines instead of borders, soft shadows tinted warm, no gradients or color washes, one accent color.

- Grid: one card with an outer radius of 28px. Cells are separated by 1px hairlines (a 1px grid gap over a hairline color). Cells are white. The card has a faint hairline ring and a soft shadow.
- Art panel: inset 8px from the cell edge, with a radius of the card radius minus the inset (20px), so corners stay concentric.
- Fill #fafafa, plus an inner 1px ring: box-shadow: inset 0 0 0 1px rgba(32,38,46,.07).
- Texture: background: repeating-linear-gradient(-45deg, rgba(32,38,46,.06) 0 1px, transparent 1px 7px).
- The scene sits centred on the panel, about 126×118px.
- Text bars: body bars 4px tall with a 2px radius in #e5e9ef; heading bars 5px tall in #cdd4de. Vary the widths (34–92px).
- Mini windows and cards: white with a 9px radius.
- Shadow: 0 0 0 1px rgba(47,42,34,.06), 0 8px 20px -10px rgba(47,42,34,.25).
- Tab strip: 20px tall, #eef1f5. Tabs: 16px tall with 6px top corners; the active tab is white.
- Favicons: 10px.
- Inner surfaces such as charts or fields: #f4f6fa. Secondary data: #b9c9e0. Accent: #3462ad, used only on the result.
- Icon chip (top-left of each tile): 32px, 10px radius, 1px border rgba(32,38,46,.1), white, shadow 0 1px 2px rgba(32,38,46,.05), a line-style glyph in #4b5563.
- Text color: a warm near-black, #2f2a22.
- Hover: the cell darkens to about 2.5% grey; the panel goes to #f4f5f6 with its ring at .09; the icon chip grows 32→36px from its top-left corner, its glyph turns to the text color, and its shadow deepens slightly.
- Dark mode (suggested values; keep the same relationships):
- Cells #17181a, panel #1d1f22, inner ring rgba(255,255,255,.06), texture rgba(255,255,255,.04).
- Body bars #2c2f34, heading bars #3a3e45.
- Windows #24272b with a 1px rgba(255,255,255,.06) outline and a shadow of 0 8px 20px -10px rgba(0,0,0,.6).
- Tab strip #1a1c1f, accent #6f9bea, text #ecebe8.

## 2. Scene
- One idea per tile: 2–4 moves that show "action → result", such as "click → a small window opens" or "change here → the other side syncs".
- Abstract wireframes only: no screenshots and no real text. Use at most one small icon where something needs to be recognisable.
- Motion: ease-out for movement, cubic-bezier(.22,1,.36,1); a slight spring for appearing, cubic-bezier(.34,1.4,.64,1). Each move takes 250–600ms; the whole scene is done in about 3s.
- Icon chip: when the tile plays, its glyph redraws stroke by stroke (draw, pop or slide per part), then hands back to the solid icon.

## 3. Playback
- Resting styles are the final frame. Animations only describe where things come from (fill-mode: both or equivalent), so reduced motion shows the result and an interrupted play never jumps.
- The art panel fades in (opacity, plus translateY 6px and scale .97 to none) as its tile first plays.
- Play once in view: when about 70% of the tile is visible, wait ~200ms, then play. Tiles that enter together go ~250ms apart, in reading order. Stop on the final frame.
- One "played" state (a class or data attribute) drives every animation in the tile. To replay: remove it, force a reflow, add it back (or re-key in a framework).
- On mouse hover (mouse only) or keyboard focus, replay: blur the final frame out over ~160ms (blur 6px, opacity 0), restart under the blur, then clear it. Don't restart a play that hasn't finished.
- Optional loop on hover: while the pointer stays on the tile, replay again ~600ms after each play ends. When the pointer leaves, finish the current play and rest on the final frame.
- Touch: a tap follows the tile's link; nothing depends on hover.
- prefers-reduced-motion: reduce: no animation; show the final frame.

## 4. Colors and dark mode
- Every color is a variable on the art panel (panel, ring, texture, bars, windows, tab strip, accent, shadow); no hard-coded colors in the rules.
- Follow prefers-color-scheme, and the project's manual theme switch too (a class or data-theme), if it has one.
- Check it in both light and dark.

## 5. Delivery
- Mark the art as decorative (aria-hidden) and keep translatable text out of it.
- Check it in a real browser: first play, hover replay, keyboard focus, reduced motion, dark mode and a phone-width layout.

Source: the original post. Kept in its original language, unedited.

Want more prompts like this one?

Get the 50 most-viewed Claude 5.5 video prompts on one page: the full original text, the creator and the post it came from. We'll only email you when there's a new prompt worth trying. Unsubscribe anytime.

Original post: https://x.com/Kubai087/status/2115393082472681875

All works are open data at GitHub · awesome-opus-5.5-video.

Model attribution is as stated by the creator and was not independently reproduced. View counts are a snapshot from 2026-10-30. The work belongs to its creator; DM @GoSailGlobal on X for corrections or removal.

More product & ads

Related articles