Savoir-Faire Click Reveal
What it does
A full-screen dark editorial landing where every click spawns a random image or autoplaying video card at the pointer. Each card is set with gsap.set (scale 0, slight random rotation) then a gsap.timeline scales it up (random 0.5–1) and simultaneously drifts it 500px upward over 4s while fading in, then fades out and self-removes. A custom sparkle cursor trails the mouse via gsap.to with power2.out, and a click SFX plays on each spawn.
How it's built
| Category | interactive |
|---|---|
| Tech | gsap |
| Complexity | page |
| 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.
# Savoir-Faire Click Reveal — click-to-spawn floating media cards + sparkle cursor
## Goal
Build a full-screen, black editorial landing page for a creative studio. A big uppercase serif wordmark sits at the bottom, a fixed nav sits at the top, and a custom **white circular cursor with a black sparkle glyph** trails the mouse. The star effect: **every click anywhere on the page spawns a random media card** (50/50 an image or an autoplaying video) at the pointer — it pops in from `scale: 0` with a slight random tilt, then **drifts 500px straight up over 4s while holding full opacity**, and finally **fades out and removes itself**. A short click sound plays on each spawn. Cards pile up as the user keeps clicking.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) only — **no GSAP plugins**, no ScrollTrigger, no smooth-scroll library. Single import:
```js
import gsap from "gsap";
```
Everything is mouse-driven (mousemove + click); there is no scroll behavior (the page is `overflow: hidden`, exactly one viewport tall).
## Layout / HTML
```
<body>
…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.