Merle Photo-Studio Hover Index
What it does
A dark full-screen index for a photography & art-direction studio where hovering a series in the left list crossfades a full-bleed background image and reveals a positioned project preview (image, title, tags, description). GSAP tweens a clip-path wipe on the preview image plus staggered x/y + opacity transforms driven by per-item layout variants, all triggered on mouseenter/mouseleave.
How it's built
| Category | hover |
|---|---|
| Tech | gsap |
| Complexity | page |
| 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.
# Thetalab — Hover Preview Landing
## Goal
Build a dark, full-screen studio/portfolio landing page. The left third of the screen holds a vertical list of 10 project names (pill chips). **Hovering a name crossfades a full-bleed background photo AND reveals a floating "preview card"** for that project — a portrait image that wipes open via an animated `clip-path`, plus a large title, a tags line, and a short description that each slide into place from different directions. Each project uses one of 3 rotating layout **variants** that place the card pieces in different corners and make the image wipe open from a different edge. Moving off the list crossfades everything back to a default muted background.
## Tech
Vanilla HTML/CSS/JS with ES module imports, bundled by Vite. Use **`gsap`** (npm) only — no GSAP plugins are needed (the `clip-path` polygon is tweened by GSAP's built-in CSSPlugin because both keyframes share the same 4-point count). No smooth-scroll / Lenis (the page never scrolls). No canvas, no WebGL.
```
import gsap from "gsap";
```
## Layout / HTML
Everything lives inside one fixed, `overflow: hidden`, 100vw×100vh black container. Static markup:
- `.container` (fixed, `background-image: var(--sky)`, overflow hidden)
- `nav` — three equal flex columns (`nav > div { flex:1 }`):
…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.