24/7 Artists Image Trail
What it does
A cursor-driven image trail across a full-viewport hero: as the mouse moves past a distance threshold, a new 175px image spawns at the cursor and slides toward it, revealed through 10 horizontal clip-path mask layers that open from the center outward with a staggered ease, then collapse and fade back to the center after a ~1s lifespan. Pure vanilla JS with CSS transitions and requestAnimationFrame (no GSAP); disabled below 1000px width.
How it's built
| Category | interactive |
|---|---|
| Tech | vanilla JS |
| Complexity | section |
| Performance cost | medium |
| Mobile-safe | desktop-first |
How it works
A dark hero where the cursor leaves a trail of portraits. Sweep the mouse across the screen and small square images of fashion portraits pop up behind it, one after another. Each one does not simply appear: it opens like a set of blinds, a stack of thin horizontal strips widening from a vertical line in the centre, the middle strips first and the outer ones last, while the whole image glides after the cursor. A second later the strips close again, edges first, the picture dims, and it is gone.
There is no library at all here, not even GSAP. The motion is native CSS transitions, set and changed from JavaScript, inside a single animation loop that watches the mouse.
When an image spawns, and where
New images are triggered by distance, not time. The loop measures how far the pointer has travelled since the last image, and once it passes a threshold a new one is created, cycling through the set so consecutive portraits differ. Alongside the real cursor position, the loop keeps a second, lagged position that eases towards the cursor a little every frame. Each new image is placed at the lagged point and then told to move to the real one, so every portrait visibly slides after the hand as it opens. That small gap between where the image is born and where it ends up is what makes the trail feel alive rather than stamped.
The striped reveal
Each image is built from a stack of identical layers, all showing the same picture, each clipped to its own thin horizontal band. Every band starts as a zero-width sliver in the middle and its clip-path is then widened to the full width with a CSS transition. The bands start at different moments depending on their distance from the centre of the image, so the picture blooms outwards from its middle. On the way out the order is reversed and quicker, so it folds away from the edges inwards, while the image fades down before being removed from the page.
A queue keeps the trail in order: only the oldest image is checked each frame, and when its time is up it plays its exit and is cleaned up.
Where it gets hard
Transitions only run if the starting state has been painted before the end state is set, so every new image commits its closed clips first and opens them on the next frame. The background plate matters more than it seems: a faint, subjectless haze gives the portraits something to be lit against, while a face in the background competes with every image in the trail.
Performance and mobile
Only clip-path, position and opacity change, on a handful of small elements at a time, so it is light. The effect needs a mouse and is switched on only on wide screens; below that width nothing spawns and any live trail is cleared, which also stops the animation loop.
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.
# Cursor Image Trail with Striped Clip-Path Reveal (dark editorial hero)
## Goal
Build a full-viewport dark hero where **moving the mouse leaves a trail of 175×175px editorial portrait images: each time the cursor travels past a distance threshold, a new image spawns at a smoothed (lerped) trailing position and slides toward the live cursor position while it is revealed through 10 horizontal strip masks that expand from a center line outward with a middle-first stagger; ~1 second later the strips collapse back to the center (edges first) while the image dims, and the element is removed**. The star effect is the striped clip-path in/out reveal combined with the lerp-lagged spawn-and-slide motion.
## Tech
Vanilla HTML/CSS/JS with an ES module script (`<script type="module" src="./script.js">`). **No GSAP, no plugins, no Lenis, no libraries at all** — the whole effect is native CSS `transition`s (on `clip-path`, `left`, `top`, `opacity`) driven by a `requestAnimationFrame` loop, `mousemove` tracking, manual linear interpolation (lerp), and `setTimeout`-based staggers. There is no scroll interaction.
## Layout / HTML
```
section.hero (full-viewport stage)
.hero-img > img (full-bleed faint background image)
p "[ The Future Moves in Frames ]"
p "Experiment 457 by Motionprompts"
.trail-container (empty; JS appends the trail images here)
…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
Learn the technique
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.