Burocratik Image Trail
What it does
A cursor-driven image trail: while the mouse moves across the central full-viewport panel, a new 200px photo spawns at the cursor once it passes a distance threshold, scaling up from 0 with a random rotation via a CSS transform transition, then collapsing back to scale 0 and unmounting after a ~750ms lifespan. Idle cursors and scroll events also seed images. Pure vanilla JS driven by requestAnimationFrame and CSS cubic-bezier transitions (no GSAP); Lenis provides smooth scrolling.
How it's built
| Category | interactive |
|---|---|
| Tech | lenis |
| Complexity | section |
| Performance cost | medium |
| Mobile-safe | desktop-first |
| Scroll | hijacks scrolling |
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 (vanilla JS + CSS transitions)
## Goal
Build a three-section page whose middle, light-colored full-viewport panel spawns a trail of photos under the cursor: every time the mouse travels far enough (or sits idle, or the page scrolls) a new 200×200 image pops in at the cursor position with a random tilt, scaling up from 0, then collapses back to scale 0 and unmounts after a short lifespan. The result is a continuous, self-cleaning stream of tilted photos chasing the pointer.
## Tech
Vanilla HTML/CSS/JS with ES module imports. **No GSAP is used** — the animation engine is a `requestAnimationFrame` loop plus CSS `transform` transitions with custom `cubic-bezier` easings. Install and import `lenis` (npm) for smooth scrolling. Everything runs inside a `DOMContentLoaded` handler.
## Layout / HTML
Three stacked `<section>` elements, each exactly one viewport tall:
```
<section class="intro">
<h1>Dynamic Cursor Trail Animation</h1>
</section>
<section class="trail-container">
…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.