packages/docs/docs/freeze.mdx
import {FreezeExample} from '../components/FreezeExample/FreezeExample';
const BlueSquare: React.FC = () => <div></div>
// - BlueSquare
When using the <Freeze/> component, all of its 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, irrespective of any <Sequence>.
<Html5Video />, <Video> and <OffthreadVideo /> elements will be paused and <Html5Audio /> and <Audio> elements will render muted.
// @include: example-BlueSquare
// ---cut---
import {Freeze} from 'remotion';
const MyVideo = () => {
return (
<Freeze frame={30}>
<BlueSquare />
</Freeze>
);
};
The Freeze component is a high order component and accepts, besides it's children, the following props:
frameAt which frame it's children should freeze.
active<AvailableFrom v="4.0.127"/>Deactivate freezing component by passing false.
You may also pass a callback function and accept the current frame and return a boolean.
// @include: example-BlueSquare
// ---cut---
import {Freeze} from 'remotion';
const MyVideo = () => {
return (
<Freeze frame={30} active={(f) => f < 30}>
<BlueSquare />
</Freeze>
);
};