How I Brought My Illustrations to Life with PixiJS: Parallax, Particles, and Sound in the Browser
I'm a book illustrator by trade. In 2012 I drew a piece called After Picasso — and at some point I realized a static image wasn't the end of the story for me. A side experiment with WebGL grew into a series I call Living Illustrations: finished illustrations, reopened — this time with depth, wind, and time inside them.
What is a "living illustration"?
Not a video, not a GIF. It's an interactive scene that responds to the visitor:
- Mouse movement (or touch) drives the parallax
- The scene has "sleep" and "awake" states
- Audio only starts on a user gesture — which conveniently sidesteps browser autoplay policies
Anatomy of a scene: dissecting "After Picasso"
Layers. The illustration is cut into 6 PNG layers — background, midground, shadow, body, hand, foreground — each with its own zIndex and parallax coefficient, from 0.02 (background) to 0.12 (foreground). The closer the layer, the harder it reacts to the cursor. That coefficient gradient is what sells the depth.
Breathing. The body and hand layers slowly scale and shift on a sine curve, so the character appears to breathe. Cheap to compute, surprisingly effective.
The bird. Three flight frames, orbiting a point at (750, 420) with a ~500 px radius.
Particles. Up to 150 dust particles, color-locked to whichever zone of the artwork they rise from.
Twelve years later: "Pilot" (2024)
Same idea, different league:
- The campfire is a sprite sheet (8×4 frames) driven by a full state machine:
sleep → invite → awake → active → peak → fade, with spark bursts in the active phase
- 8 parallax layers, including two moons at different depths
- A soundscape: campfire, dusk in the woods, wind
The stack
- PixiJS (WebGL) for rendering — with a static-image fallback when WebGL isn't available
- Vite for the build (hashed assets)
- Howler / Tone.js for audio
- A custom shader with subtle noise (
uNoiseIntensity: 0.01) and chromatic aberration, so the scene feels alive even when nothing is moving
What this taught me as an artist
- Draw in layers from day one. If you might animate an illustration later, separate it into planes while drawing, not after.
- Performance is part of the composition. 150 particles isn't arbitrary — it's a budget.
- Side projects with no deadlines are the best way to learn a new tool. This whole series started as an experiment that refused to stay small.
Fun fact: the section is deliberately hidden from search engines (noindex) and removed from my site's navigation — a private lab I've decided to open up a little.
Try the scenes yourself: vimark.art/living-illustrations