ContextQMD
Back to Remotion

ripple()

packages/docs/docs/transitions/presentations/ripple.mdx

4.0.4712.6 KB
Original Source

ripple()<AvailableFrom v="4.0.465"/>

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

<Demo type="ripple" />

:::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

tsx
import {AbsoluteFill} from 'remotion';

const Letter: React.FC<{
  children: React.ReactNode;
  color: string;
}> = ({children, color}) => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: color,
        opacity: 0.9,
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 200,
        color: 'white',
      }}
    >
      {children}
    </AbsoluteFill>
  );
};
// ---cut---
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

<CompatibilityTable chrome firefox={false} safari={false} nodejs bun serverlessFunctions clientSideRendering serverSideRendering player studio />

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