Transitions
Scene transitions built as presentations for TransitionSeries
Most transitions here are presentations for @remotion/transitions — pass one to a TransitionSeries.Transition between two sequences and control the pace with linearTiming or springTiming. The sequencers at the bottom work differently: they own the whole run of scenes themselves.
Camera Motion
Pure CSS-transform physics, no dependencies beyond Remotion.
WhipPan
Whip the camera sideways with motion blur so both scenes fly through in one move
PushThrough
Dolly through the outgoing scene while the next one approaches from the depth
FocusPull
Rack focus from one scene to the next through a soft defocus breath
ZoomBlur
Push the outgoing scene through the viewer while the incoming one resolves out of blur
Shader
Textured, organic transitions driven by frame-synced shaders. They install @paper-design/shaders-react.
GrainDissolve
Disintegrate the outgoing scene into soft grainy shapes and condense the next out of the noise
WaveWipe
Sweep a grainy wave up across the frame and reveal the next scene from below
RippleZoom
Fly the camera through the center of grainy ripple rings while the next scene approaches
SwirlDissolve
Twist the frame into swirling bands that unwind into the next scene
DitherDissolve
Dissolve through an animated dither pattern for a retro print texture
PerlinDissolve
Sweep a perlin-noise threshold across the frame to dissolve into the next scene
SmokeDissolve
Expand a smoke ring outward across the frame to reveal the next scene
WarpDissolve
Melt the outgoing scene into a folding domain-warp field that straightens into the next
Stylized
Kinetic, interface-flavored transitions — typed wipes, scattering icons, and messaging motion.
AsciiDissolve
Dissolve one scene into the next through a drifting field of ASCII glyphs
CaretWipe
Sweep a typing caret across the frame, wiping the outgoing scene into the next
IconScatter
Scatter a field of icons over the cut, hiding the scene swap at the field's peak
Canvas
Pixel-level transitions. These read the actual pixels of both scenes through the experimental html-in-canvas browser API and post-process them per frame, which is what makes tearing, burning, and shattering possible at all. Chrome 149+ behind chrome://flags/#canvas-draw-element shows the real effect; every other browser degrades to a CSS approximation of the same edit, so previews and renders never break.
GlitchCut
Tear a hard cut into displaced slices with channel split and corrupted blocks
EmberBurn
Set the outgoing frame on fire so it boils, chars, and blows away as sparks that carry its own colour
ParticleDissolve
Grind the frame into drifting grey dust and let the next scene coalesce back out of it
GridWave
Send a wave across the frame that raises the picture into solid blocks and sets them down carrying the next scene
Displacement
Shear the frame into a grid of offset colour-fringed tiles and settle them back on the next scene
Scene Sequencers
Not presentations. Each of these takes the whole list of scenes and runs the timeline itself, so the boundary is a property of the film rather than something dropped between two sequences. Scenes never overlap and the stage is continuous, which is what makes a run of them read as one cut instead of a slideshow.