Skip to main content

<Freeze>

import { FreezeExample } from "../components/FreezeExample/FreezeExample";

Available from v2.2.0.

When using the <Freeze/> component, all of it's children will freeze to the frame that you specify as a prop.

If a component is a child of <Freeze/>, calling the useCurrentFrame() hook will always return the frame number you specify.

<Video/> elements will be paused and <Audio/> elements will render muted.

API

The Freeze component is a high order component and accepts, besides it's children, the following props:

  • frame (required): At which frame it's children should freeze.

Example usage

tsx
import { Freeze } from "remotion";
 
const MyVideo = () => {
return (
<Freeze frame={30}>
<BlueSquare />
</Freeze>
);
};
tsx
import { Freeze } from "remotion";
 
const MyVideo = () => {
return (
<Freeze frame={30}>
<BlueSquare />
</Freeze>
);
};

Demo

See also