Image Explosion with JS Physics
What it does
As the footer scrolls into view, 15 images burst upward from the bottom edge and rain back down with a hand-rolled requestAnimationFrame physics simulation (per-particle velocity, gravity, friction and rotation). A scroll listener watches the footer's bounding rect and fires the one-shot explosion, resetting after the particles fall past the container midpoint. Lenis provides the smooth scroll.
How it's built
| Category | scroll |
|---|---|
| Tech | lenis |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
| 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.
# Image Explosion Scroll Animation
## Goal
Build a single scrollable page where, the moment the footer scrolls halfway into view, 15 images violently burst upward out of the footer's bottom edge and rain back down under gravity — a one-shot "image explosion" driven by a hand-rolled requestAnimationFrame physics simulation (per-particle velocity, gravity, friction and rotation). No GSAP is used for this effect; the physics loop IS the effect.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `lenis` (npm) for smooth scrolling. No GSAP plugins are required — the explosion is pure JavaScript physics updating `style.transform` inside a `requestAnimationFrame` loop.
```js
import Lenis from "lenis";
```
Wrap all JS in a `DOMContentLoaded` listener.
## Layout / HTML
Four stacked blocks, in this order:
1. `<section class="hero">` — empty; full-screen background image.
…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.