Accordion Frames Spotlight Row
What it does
Centered accordion row of 20 vertical image slivers (10 on mobile) where hovering a panel (tapping on mobile) expands it to a 400px frame while the others collapse to 20px, eased by a slow decelerating CSS transition. A white focus frame with full-viewport vertical crosshair lines glides along to track the focused panel, and a ResizeObserver recomputes the pixel layout on resize.
How it's built
| Category | hover |
|---|---|
| Tech | vanilla JS |
| Complexity | section |
| Performance cost | medium |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Accordion Frames — Spotlight Row
## Goal
Build a full-viewport, dark hero section containing a single horizontal **accordion row of tall, thin image slivers**. All panels sit collapsed to a 20px-wide sliver by default; hovering one panel (tapping on mobile) makes it smoothly **expand to a wide 400px "frame"** while every other panel simultaneously **collapses back to 20px**, all sliding to make room via a slow, decelerating ease. A crisp **white focus frame** with two thin vertical crosshair lines running the full height of the viewport glides along the row to sit exactly over the currently focused panel. The star effect is this synchronized expand/collapse "accordion" motion plus the tracking frame.
## Tech
Vanilla HTML/CSS/JS. **No GSAP, no npm animation libraries, no smooth-scroll** — the entire motion is a **CSS `transition`** on `left`/`width` driven by a small vanilla-JS layout engine, plus a `ResizeObserver`. Ship it as one `index.html`, one `styles.css`, one ES-module `script.js` (`<script type="module">`). It must run in a fresh Vite project with zero dependencies.
## Layout / HTML
Minimal semantic skeleton — the JS injects the panels at runtime:
```html
<main>
<section class="spotlight">
<div class="spotlight-track">
<div class="spotlight-panels">
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.