Hover effect

Accordion Frames Spotlight Row

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: Vanilla JS
Trigger: hover
Duration: 0.25–1s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: css-transition
Complexity: 1/5
Pinned: no
Reduced motion: not handled

hover/tap accordion strip: JS writes px left/width per panel (focused 400px desktop / 100px mobile, others 20px, 5px gap, strip re-centered in the track) and a 1s cubic-bezier(0.075,0.82,0.165,1) CSS transition does all the easing; a bordered focus indicator with full-viewport crosshair lines glides to the focused panel on the same curve

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev19,151 charsCustomize

# Accordion Frames — Spotlight Row

## Goal
Build a full-viewport, dark hero section containing a single horizontal **accordion row of tall, thin image slivers*…

The build prompt

More like this

A pixel wizard casting spells

Rainbow Road Pixel Animation

One-File Generative Visual Demo

Pixel-art rabbit archer sprite animation loop

Vibe-Coded Pixel Wizard Game

Realistic 3D Taj Mahal Model

Fresh recipes, every week.