Scroll effect

Image Explosion with JS Physics

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: Vanilla JS
Trigger: scroll

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: physics
Complexity: 2/5
Pinned: no
Reduced motion: not handled
Libraries: lenis

footer-triggered rAF gravity burst of images — 15 particles launched with vy = -15 - rand*10 and vx = (rand-0.5)*20, gravity +0.25/frame, friction 0.99 on vx/vy/rotationSpeed (terminal velocity ~25px/frame), transform translate()+rotate() rewritten every frame until all particles pass the container midpoint

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev15,884 chars

# Image Explosion Scroll Animation

## Goal

Build a single scrollable page where, the moment the footer scrolls halfway into view, 15 images violently burst up…

The build prompt

More like this

A pixel wizard casting spells

Rainbow Road Pixel Animation

One-File Generative Visual Demo

Pixel-art rabbit archer sprite animation loop

Vibe-Coded Pixel Wizard Game

Realistic 3D Taj Mahal Model

Fresh recipes, every week.