Spotlight List Hover Cards
What it does
Hover list inside a dark rounded panel: entering the list pops four glass-framed cards from scale 0 with an elastic ease; hovering a title swaps it for a handwritten version (opacity, back-out scale and blur), grows its row while the neighbours shrink in proportion to their distance, and reshuffles the cards with random offsets and rotation as they follow the row's height. A soft light in the panel follows the pointer.
How it's built
| Category | hover |
|---|---|
| Tech | gsap |
| GSAP plugins | CustomEase |
| Complexity | section |
| Performance cost | medium |
| Mobile-safe | desktop-first |
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.
# Spotlight List Hover Cards — Handwritten Label Swap, Proximity Row Growth & Elastic Glass Cards
## Goal
Build a three-section page whose middle section is a dark, rounded **panel** with a centred list of six titles. When the pointer **enters the list**, four **glass-framed portrait cards** parked in the panel's corners **pop from scale 0 with an elastic ease**. When the pointer **hovers a title**: the bold uppercase title **squashes, blurs and fades out** while a **handwritten version scales in** (back-out ease); the hovered **row grows** by 50px and every other row **shrinks in proportion to its distance** (weights `1/|i−j|`), so the list breathes around the cursor; and the four cards **load that title's images** and **reshuffle** to new random offsets/rotations while following the hovered row's vertical position. Leaving the list scales the cards away and restores the rows. A soft light inside the panel follows the pointer. GSAP with `CustomEase`.
## Tech
Vanilla HTML/CSS/JS with ES module imports. `gsap` (npm) + **`CustomEase`**. Fonts: **Anton** (titles), **Caveat** 600 (handwritten), **DM Sans** 500 (body). No smooth-scroll library.
## Layout / HTML
```html
<div class="sl">
<section class="sl-intro"><h1>The Sketchbook</h1></section>
<section class="sl-spotlight">
<div class="sl-panel">
<p class="sl-panel__eyebrow">Explore the collection</p>
…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