← Back to Gallery

Remotion Video Effects

26 interactive demos

Cinematic canvas visualizations inspired by video production effects. From the original StoryLeaf intro (built with Remotion) to research-backed scientific and artistic simulations - all recreated as standalone vanilla JS.

01
StoryLeaf Video
The rendered 12s intro video (1920x1080 @ 30fps)
MP4
02
Matrix Rain
Katakana character rain with glowing trails
Canvas
03
ASCII Typewriter
Character-by-character reveal with glow pulse
DOM
04
Particles & Bokeh
Floating particles with soft bokeh orbs
Canvas
05
ASCII Flicker
Flickering ASCII art figures drifting across screen
Canvas
06
Full Intro (Canvas)
Complete intro sequence recreated in vanilla canvas
Canvas
07
Solar System Orrery
Planets orbiting with accurate relative periods
Canvas
08
DNA Double Helix
Rotating 3D helix with base pair color coding
Canvas 3D
09
Neural Network Pulse
Signals propagating through network layers
Canvas
10
Fourier Epicycles
DFT circles drawing complex shapes
Canvas
11
Lorenz Attractor
3D strange attractor with chaotic trajectories
Canvas 3D
12
Spiral Galaxy
Thousands of stars with density wave spiral arms
Canvas
13
Wave Interference
Multiple sources creating interference patterns
Canvas
14
Mandelbrot Zoom
Auto-zooming fractal with smooth coloring
Canvas
15
Boids Flocking
300+ agents with predator scattering
Canvas
16
Generative Tree
L-system tree growing with fireflies
Canvas
17
Molecular Dynamics
Atoms forming bonds with Lennard-Jones potential
Canvas
18
Quantum Tunneling
Wave packet through potential barrier
Canvas
19
Cellular Automata
Wolfram rules with neon glow cycling
Canvas
20
Aurora Borealis
Shimmering light curtains over mountains
Canvas
21
Protein Folding
Amino acid chain collapsing into 3D structure
Canvas 3D
22
Black Hole
Accretion disk with gravitational lensing
Canvas
23
Lightning Storm
Fractal bolts with flash illumination
Canvas
24
Fluid Ink
Colored ink swirling in fluid dynamics
Canvas
25
Tectonic Plates
Plate boundaries with mantle convection
Canvas
26
Music Visualizer
Audio-reactive circular spectrum with Web Audio
Audio
Original Remotion source (React/TypeScript) preserved in src-remotion/ for reference.