Fan Deck Overlay Menu
What it does
Click-to-open overlay menu: the dark panel wipes up with a clip-path while a glass shelf rises and four frosted image cards climb out of it blurred and tilted, straighten, then fan out with a centre-out stagger. With the menu open the pointer parallaxes the fan and drags a specular highlight across each card's glass; closing gathers the deck back into the shelf before the panel wipes down.
How it's built
| Category | menu |
|---|---|
| Tech | gsap |
| Complexity | section |
| Performance cost | light |
| 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.
# Fan Deck Overlay Menu — Clip-Path Panel, Glass Shelf & Fanned Image Cards
## Goal
Build a click-to-open fullscreen overlay menu. When the pill button in the top-right is pressed, a dark panel **wipes up from the bottom** (animated `clip-path` polygon) while a soft violet light blooms behind it. A thin **glass shelf** rises near the bottom, and **four frosted-glass image cards** climb out of it — blurred, tilted and slightly small — straighten up, then **fan out** left/right with a centre-out stagger into a row of four with a gentle arc and alternating rotation. With the menu open, moving the pointer **parallaxes** the cards (outer cards drift more) and a **specular highlight** follows the cursor across each card's glass; hovering a card scales it up a touch. Closing gathers the fan back into a stack, drops the cards into the shelf, dims the light and wipes the panel back down. Everything is GSAP.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) — core only, no plugins. Fonts: **DM Sans** (weights 400–600). One `script.js`, one `styles.css`, one `index.html`.
## Layout / HTML
Wrap everything in `<div class="fd">`. Class names are load-bearing.
```html
<div class="fd">
<nav class="fd-nav">
<a class="fd-brand" href="#">Lumen</a>
<button class="fd-toggle" aria-expanded="false" aria-controls="fd-menu">
…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