Minimalist rooftop bullet-dodge animation inspired by The Matrix

Prompt

The author shared the full prompt.

Create a 30-second procedural JavaScript animation inspired by the iconic rooftop bullet-dodge concept from The Matrix, but do NOT recreate the movie shot exactly. Make it an original minimalist interpretation using stick figures / black ink drawings.
Use HTML5 Canvas 2D + JavaScript. No images, no video assets, no AI-generated imagery. Everything visible must be drawn and animated programmatically.
Visual style: warm off-white paper background, black hand-drawn ink lines, rough imperfect strokes, minimalist rooftop environment, cinematic composition. Characters should be simple black stick figures/silhouettes rather than realistic actors.
30-second sequence
0–4 sec — Establishing shot
Wide side view of a rooftop. A minimalist hero character stands on the left side of the frame. An armed opponent stands approximately 8–10 meters away on the right. Add simple rooftop details such as vents, antennas and distant building silhouettes. Very subtle camera push-in.
4–7 sec — Threat
Cut closer to the opponent. He quickly raises his handgun toward the hero. Animate the arm rather than instantly changing poses. Add anticipation before firing.
7–10 sec — Gunfire
The opponent fires several shots. Show short muzzle flashes and expanding ink-like shock marks. Bullets should become visible as small black projectiles travelling toward the hero. Add thin distorted trails behind them.
10–20 sec — BULLET TIME
This is the centerpiece of the animation.
Time dramatically slows down.
The hero begins bending backward to avoid the bullets.
Animate the body progressively:
head moves backward → shoulders follow → spine arches → hips move slightly forward → knees bend.
Do NOT simply rotate the entire character.
Several bullets pass centimeters above the character's chest and face.
Create a dramatic virtual camera movement around the hero during the dodge. Because Canvas 2D is being used, fake the bullet-time camera using:
- character perspective changes
- background parallax
- scale changes
- horizontal camera movement
- subtle rotation
- foreground/background rooftop elements moving at different speeds
Add expanding circular air distortions around bullets and long curved trails to make their paths readable.
At approximately 15 seconds, create the most dramatic frame: hero almost horizontal, one bullet passing directly above the face.
Hold this visual moment briefly while the camera continues moving.
20–24 sec — Bullets pass
Time gradually returns to normal. Bullets fly past the hero and hit a rooftop structure behind him. Generate small procedural debris particles and ink splashes at the impact points.
24–27 sec — Fall
The extreme backward lean causes the hero to lose balance. He falls onto the rooftop. Animate the impact using squash/stretch, small dust/ink particles and a slight camera shake.
27–30 sec — Ending
The hero quickly raises his head from the ground. The opponent remains in the distance. Camera slowly pulls backward into a wide rooftop shot. Fade to the off-whi

Category

Motion graphics

Stack

Canvas

Made with

HTML5 Canvas 2D, JavaScript

From the author

Low cost; the author says it beat expectations.

On X

99 likes · 11K views · 99 saves