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.
Showing 59 of 59 components
- Whip PanWhip the camera sideways with motion blur so both scenes fly through the frame in one move
- Push ThroughDolly through the outgoing scene while the next one approaches from the depth
- Focus PullRack focus from one scene to the next through a soft defocus breath
- Zoom BlurPush the outgoing scene through the viewer while the incoming one resolves out of blur
Shader
Textured, organic transitions driven by frame-synced shaders. Most use @paper-design/shaders-react; Shader Seam and Shader Spiral Pass use a local OpenShaders export.
- Grain DissolveDisintegrate the outgoing scene into soft grainy shapes and condense the next scene out of the noise
- Wave WipeSweep a grainy wave up across the frame, covering the outgoing scene and revealing the next one from below
- Shader SeamReveal an OpenShaders material, then dissolve it in place to uncover the next scene
- Shader Spiral PassFly into the hero spiral and emerge through its soft center into the next scene
- Ripple ZoomFly the camera through the center of grainy ripple rings while the next scene approaches from the depth
- Warp DissolveMelt the outgoing scene into a folding domain-warp field that straightens back out into the next scene
- Swirl DissolveUnwind a swirl shader open and wind it shut to reveal the next scene
- Dither DissolveDissolve one scene into the next through a drifting field of dither pixels
- Perlin DissolveSweep a perlin-noise threshold across the frame to dissolve into the next scene
- Smoke DissolveExpand a smoke ring outward across the frame to reveal the next scene
Stylized
Kinetic, interface-flavored transitions — typed wipes, scattering icons, and messaging motion.
3Canvas
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.
- Glitch CutTear a hard cut into displaced slices with channel split and corrupted blocks
- Ember BurnSet the outgoing frame on fire so it boils, chars, and blows away as sparks that carry its own colour
- Particle DissolveGrind the frame into drifting grey dust and let the next scene coalesce back out of it
- Grid WaveSend a wave across the frame that raises the picture into a grid of solid blocks and sets them back down carrying the next scene
- DisplacementShear the frame into a grid of offset colour-fringed tiles under film grain and let them settle back on the next scene
Graphic Cuts
Bold, showy cuts built from plain CSS and SVG: shapes, slats, torn paper, streaks and light. No dependencies beyond Remotion.
6- Iris WipeClose a cartoon iris on the subject, hold it as a dot for a beat, then open it on the next scene
- Venetian BlindsSplit the outgoing scene into horizontal slats that turn edge-on in a staggered ripple to reveal the next one
- Paper TearRip the frame down the middle and fling both halves apart with fibrous torn edges, revealing the scene underneath
- Pixel SortMelt the scene into glowing vertical streaks like glitch-art pixel sorting, then drop the next scene in column by column
- Light LeakDrift a warm analog light leak across the frame, blow it out at the cut and cool off on the next scene
- HyperspaceStretch a starfield into radial streaks, tunnel forward through the scene and land on the next one through a white flash
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.
2- Band OpenNewA horizontal band opens at the center of a stacked headline to reveal a full-frame photo title card
- Band ShiftNewHorizontal bands slide across in a stagger, carrying colored blocks that swap one scene for the next
- Card Swipe CoverNewA tilted card swipes across the frame and covers the headline, revealing a grid of launch kit cards
- Color BarsNewSlanted fluted color bars whip across the frame and swap the outgoing shot for the incoming one
- Diagonal SplitNewA diagonal seam slides the outgoing scene away to reveal the next with a band of light along the edge
- Hairline OpenNewA hairline of light draws across the frame and opens like a slit onto the next serif statement
- Replay WipeNewA broadcast stinger wipes from a live shot to a slow-motion replay and back
- Ring CutNewConcentric colored rings expand from a chosen point and the last ring carries in the next scene
- Tile WaveNewA diagonal wave shrinks a grid of tiles away and regrows them as the next scene on a blue gradient
- Baton WordNewKinetic type where each line hands its last word to the next line as an accent-colored baton
- Column SlideNewVertical columns slide across in a stagger and swap one headline for another
- Cue WordNewKinetic type lines where one cue word lands in color, then the whole line slides, drops, lifts or cuts away
- Halftone CutNewA diagonal wave of halftone dots shrinks one serif headline away and grows the next in its place
- Letter GateNewThe camera pushes into a giant letter pair and the gap opens like a gate onto the next scene
- Shape CutNewA circle, square or pill swells to cover the headline, then shrinks to a small mark beside the next line
- Window TrailNewAn orange window sweeps up over the old line and drags the new line in behind it
- Beam SweepNewA beam of light sweeps across a page builder and reveals a closing headline over a glowing horizon
- Bloom RingNewA ring of warm, striped light blooms outward from the center and swaps a headline for a logo scene
- Flash SweepNewA tilted band of light sweeps across the frame and swaps one shot for the next
- Light Burn to LineNewA browser scene burns down to a bright line of light that opens onto a closing headline and button
- Ring BurstNewConcentric colored rings burst outward from a point and the last ring carries in the next scene
- Slit RevealNewA point of light draws a hairline that opens onto a product scene, with a glow ring below
- Strobe MontageNewA fast strobe of photo frames flickers between two scenes and lands on a prompt box
- Caret CollapseNewA line of typed text crops down to its blinking caret, which glides over and opens into a prompt screen
- Disc PopNewA grid of colored glyph discs pops across the frame and swaps a prompt screen for a video player
- Press Warp DiveNewA send button is pressed, the frame pinches into it and dives through an orb into the result screen