Sections · Component Template

Bento Grid

Six feature tiles that show instead of tell, with a cursor spotlight that lights the borders. Warm-neutral dark, one coral accent.

View prompt

Output of this prompt · Claude Opus 5.5 · CSS Grid

Open

Move the pointer across the grid to light the borders. Each tile’s visual is built from CSS and inline SVG, with no images.

The Prompt 1,356 words

Build a bento grid feature section for a developer platform: a header and six tiles, each with its own small live visual, and a cursor spotlight that lights the tile borders. Match my project's existing stack, conventions, and design tokens. If there are none, output a single HTML file with inline CSS and JavaScript and zero dependencies.

The goal: calm, precise, warm-neutral dark. One coral accent. Every tile shows the feature instead of describing it, and nothing moves faster than it needs to.

LOOK
- Colors: page #0C0C0B, tile #131312, tile border rgba(255, 255, 255, 0.07), inner surfaces #1A1A18, text #F2F1EC, muted #8B8A84, faint #5E5D58, coral #FF6A3D.
- Fonts: UI is system-ui, -apple-system, "Segoe UI", Roboto, sans-serif. Data and code are ui-monospace, "SF Mono", Menlo, Consolas, monospace, with tabular numerals.
- Section: max-width 1120px, centered, padding clamp(40px, 7vw, 88px) clamp(20px, 4vw, 40px).
- Header, left aligned, 40px above the grid:
  - Eyebrow "Platform": 12px, weight 600, uppercase, letter-spacing 0.16em, coral.
  - h2 "Everything between git push and production.": clamp(30px, 4.2vw, 52px), weight 600, letter-spacing -0.035em, line-height 1.05, max-width 18ch, text-wrap: balance, 14px below the eyebrow.
  - Paragraph "Previews, edge routing, rollbacks, and observability in one quiet dashboard. Nothing to wire up.": 16px, line-height 1.6, muted, max-width 52ch, 16px below.
- Grid: 4 columns, 12px gap, grid-auto-rows minmax(184px, auto), areas:
  "a a b c" / "a a d d" / "e e f f"
  Under 900px wide: 2 columns, areas "a a" / "b c" / "d d" / "e e" / "f f". Under 560px: 1 column in order a, b, c, d, e, f.
- Tile: border-radius 16px, background #131312, 1px border rgba(255, 255, 255, 0.07), padding 22px, flex column. Title 16px weight 600 #F2F1EC, description 14px line-height 1.5 muted 4px below, then the visual pushed to the bottom with margin-top auto and 20px minimum space above it.

THE SIX TILES
A. "Preview deploys in 9 seconds" / "Every pull request gets its own URL before review starts."
   Visual: a log panel (#1A1A18, radius 10px, 1px border rgba(255, 255, 255, 0.06), padding 14px 16px, mono 12.5px, line-height 1.9) with five lines, each a left status glyph, the text, and a right-aligned muted duration:
   "▲ Cloning github.com/acme/web" "0.4s" / "✓ Installed 214 packages" "1.8s" / "✓ Built 36 routes" "4.1s" / "✓ Uploaded 2.3 MB" "0.9s" / "● Ready pr-482.acme.preview" "9.2s".
   The ▲ and ✓ glyphs are muted, the ● is coral, the final line's text is #F2F1EC, the others are muted. Under the lines, a 3px progress track (rgba(255, 255, 255, 0.06), radius 3px) with a coral fill.
B. "31 edge regions" / "Requests land on the closest one."
   Visual: a 4 × 2 grid of region codes in mono 12px muted: iad sfo gru fra lhr sin hnd syd, each preceded by a 6px coral dot.
C. "Rollback in one click" / "Every deploy is immutable."
   Visual: three version rows (mono 12px, 8px row gap, each row padding 8px 10px, radius 8px): "v1.42 · a3f9c1 · now" on #1A1A18 with a 2px coral left border and #F2F1EC text, then "v1.41 · 7be204 · 2h" and "v1.40 · 19d7aa · 1d" in muted text on transparent rows.
D. "Fast where it counts" / "p99 latency, last 24 hours."
   Visual: on the left, "42" at 44px weight 600 letter-spacing -0.04em with "ms" at 15px muted; on the right, filling the remaining width, an SVG sparkline (viewBox 0 0 240 64, preserveAspectRatio none, height 64px): a 1.5px coral path (pathLength 1) through 24 points spaced evenly from x 0 to 240, using p99 values 68 64 66 61 63 58 60 55 57 53 54 50 52 49 50 47 48 45 46 44 45 43 44 42 mapped to y = 8 + (68 − v) / 26 × 48, and a matching area below it filled with a coral linear gradient from 0.22 to 0 opacity. A 6px coral dot marks the last point; make it an HTML element positioned over the SVG's right edge at 87.5% of its height, so the stretched viewBox never turns it into an ellipse.
E. "An environment per branch" / "Secrets and databases follow the branch."
   Visual: an SVG (viewBox 0 0 320 84, max-width 320px, height 84px, preserveAspectRatio xMinYMid meet) of git lines, stroke-width 1.5, round caps:
   - main: path M40 20 H312 in #5E5D58, with r=4 #5E5D58 nodes at x 60, 150, 250. Label "main" at x 0, y 24.
   - feat/checkout: path M150 20 C170 20 172 50 192 50 H210 in coral, ending in an r=4 coral node at 210,50, label "feat/checkout" at x 220, y 54 in #F2F1EC.
   - fix/nav: path M60 20 C80 20 82 74 102 74 H120 in #5E5D58, ending in an r=4 #8B8A84 node at 120,74, label "fix/nav" at x 130, y 78 in muted.
   Labels are mono 11px.
F. "Enterprise-ready from day one" / "SOC 2 Type II, SAML SSO, and audit logs."
   Visual: a row of three chips, "SOC 2", "SAML SSO", "Audit log" (mono 12px, padding 6px 10px, radius 999px, 1px border rgba(255, 255, 255, 0.1), #F2F1EC), the first one preceded by a 14px coral lock icon (stroke 1.75).

THE SPOTLIGHT
- On pointermove over the grid, for every tile set CSS custom properties --mx and --my to the pointer position relative to that tile, in px. Throttle with requestAnimationFrame. Pointer events only, so it works with pen and mouse.
- Each tile has a ::before ring: position absolute, inset -1px (so it sits exactly on the border), border-radius inherit, padding 1px, background radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 106, 61, 0.55), transparent 45%), masked so only the 1px border ring shows (mask with content-box and border-box layers composited with exclude, plus the -webkit-mask-composite: xor fallback).
- Each tile has a ::after wash: inset 0, border-radius inherit, background radial-gradient(520px circle at var(--mx) var(--my), rgba(255, 106, 61, 0.06), transparent 40%).
- Both are opacity 0, and fade to 1 over 300ms while the pointer is inside the grid (toggle a class on the grid on pointerenter and pointerleave). Tile content sits above them (position relative, z-index 1).

MOTION
- Entrance: the header block and then each tile in DOM order fade in and rise 10px, 600ms cubic-bezier(0.2, 0.7, 0.2, 1), staggered 70ms.
- Tile A loops on a 6s cycle: each log line fades in and rises 4px over the first 6% of the cycle, holds to 88%, and fades out by 96%; line delays 0s, 0.5s, 1s, 1.5s, 2s. The progress fill grows from 0 to 100% width over the first 40% of the cycle (delay 0.2s), holds, and fades out with the lines.
- Tile B: each dot has a coral ring pulse (box-shadow from 0 0 0 0 rgba(255, 106, 61, 0.45) to 0 0 0 6px rgba(255, 106, 61, 0)), 2.4s ease-out infinite, delays staggered 0.3s per region.
- Tile D: the line draws in once on load (pathLength 1, stroke-dasharray 1, dashoffset 1 to 0, 1.4s ease-out, 0.5s delay), the area fades in after it, the end dot fades in last.
- Tile E: a second coral circle on top of the feat/checkout node scales from 1 to 2.5 and fades from 0.45 to 0, 2.4s ease-out infinite (transform-box fill-box, transform-origin center).

STRUCTURE
<section aria-labelledby> with a <header> and a <ul class="bento" role="list"> of six <li class="tile"> elements, each with an h3, a p, and the visual in a div with aria-hidden="true".

ACCESSIBILITY
- Titles are h3s under the section h2. Every visual is decorative and aria-hidden; its meaning is already in the title and description.
- Text contrast stays at 4.5:1 or above on #131312 (muted #8B8A84 passes).
- prefers-reduced-motion: no entrance, no loops, no pulses. Show the final states: all log lines visible, progress full, sparkline drawn. The spotlight stays, since it only follows the pointer.

NEVER
- Gradient-filled tiles, glassmorphism, drop shadows on tiles, or tiles that tilt, lift, or scale on hover.
- Stock icons standing in for a visual, emoji, or illustrations of people.
- Purple, blue-violet, or rainbow accents. A second accent color.
- Equal-sized tiles, or a grid that leaves an empty cell at any breakpoint.

CopyThe full prompt, one click.
PasteInto Cursor, Claude Code, or any agent.
CompareAgainst the live demo above.

What’s Inside

Named Grid Areas

Four columns with grid-template-areas, re-mapped at two breakpoints so no layout ever leaves an empty cell.

Border Spotlight

A radial gradient masked down to the 1px border ring follows the pointer across every tile at once.

Inner Wash

A second, much fainter gradient lights the tile surface so the spotlight feels like light, not an outline.

rAF-Throttled Pointer

Pointer moves are coalesced into one update per frame, and only two custom properties change per tile.

Deploy Log

Five lines cascade in on a 6s loop with a progress bar, showing a preview deploy in the time it takes to read it.

Self-Drawing Sparkline

A path with pathLength="1" draws itself once, then the area and end dot fade in.

Git Branch Diagram

Hand-placed SVG curves and nodes. The live branch pulses; the rest stays still.

Final-State Fallback

Reduced motion skips every loop and shows each visual already finished.

Usage Guidelines

Use This When

A landing page needs to present four to eight features at a glance
Each feature can be shown with a small, concrete visual
You want one section that feels interactive without any scroll animation

Not Ideal When

Features need long explanations; use a list or a comparison table
You have only two or three features; a bento grid will look sparse
Most visitors are on touch devices and the spotlight is the main draw

Browse all components →