Making components reusable

React components allow us to encapsulate video logic and reuse the same visuals multiple times.

Consider a title - to make it reusable, factor it out into its own component:

MyComposition.tsx
tsx
import {AbsoluteFill, interpolate, useCurrentFrame} from'remotion';
constTitle:React.FC<{title:string}> = ({title}) => {
constframe=useCurrentFrame();
constopacity=interpolate(frame, [0, 20], [0, 1], {
 extrapolateRight: 'clamp',
 });
return (
 <divstyle={{opacity, textAlign: 'center', fontSize: '7em'}}>{title}</div>
 );
};
exportconstMyVideo= () => {
return (
 <AbsoluteFill>
 <Titletitle="Hello World" />
 </AbsoluteFill>
 );
};

To render multiple instances of the title, duplicate the <Title> component.

You can also use the <Sequence> component to limit the duration of the first title and time-shift the appearance of the second title.

tsx
import {Sequence} from'remotion';
exportconstMyVideo= () => {
return (
 <AbsoluteFill>
 <SequencedurationInFrames={40}>
 <Titletitle="Hello" />
 </Sequence>
 <Sequencefrom={40}>
 <Titletitle="World" />
 </Sequence>
 </AbsoluteFill>
 );
};

You should see two titles appearing after each other.

Note that the value of useCurrentFrame() has been shifted in the second instance, so that it returns 0 only when the absolute time is 40. Before that, the sequence was not mounted at all.

Sequences by default are absolutely positioned - you can use layout="none" to make them render like a regular <div>.

See also​

See also