Skip to main content

ripple()v4.0.465

A presentation that displaces the outgoing scene with a sinusoidal wave radiating from the center while crossfading to the incoming scene.

warning

This presentation is built with HTML-in-canvas and requires Google Chrome with chrome://flags/#canvas-draw-element enabled. It does not work in Firefox or Safari.

Example​

RippleTransition.tsx
import {linearTiming, TransitionSeries} from '@remotion/transitions';
import {ripple} from '@remotion/transitions/ripple';

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={ripple({})}
        timing={linearTiming({durationInFrames: 30})}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

API​

Accepts an object with the following options:

amplitude?​

Controls the spatial frequency of the ripple wave. Larger values produce more, tighter ripples emanating from the center.

Defaults to 100.

speed?​

Controls how quickly the ripple wave travels outward over the course of the transition. Larger values make the wave race outward faster.

Defaults to 50.

Compatibility​

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

For Preview, Chrome with the chrome://flags/#canvas-draw-element flag enabled is required.

Credits​

The fragment shader is adapted from the ripple GL Transition by gre, licensed under MIT.

See also​