remocomp.
Agent index llms.txt GitHub
All lessons
Study 01Foundation 8 min

Time is the material

Read a composition as a timeline, then map frames to a visual change.

In this studyFrames, interpolation, composition duration
01

Start with a frame, not a timer.

A Remotion component is rendered at a known frame. Treat that frame as an input: the same frame and props should always produce the same image.

02

Give a value a beginning and an end.

Interpolation turns a frame range into a visual range. Keep the input and output ranges explicit so the animation is easy to reason about and scrub.

03

Choose the useful part of the timeline.

A composition duration is an editorial decision. Give an entrance enough room to read, then leave a hold before the next beat.

Open Kinetic Text in the component workbench
Try the examplekinetic-text
SCRUB TO EXPLORE30 FPS 60 FRAMES
A SMALL PATTERN

Under the motion

const frame = useCurrentFrame();
const opacity = interpolate(
  frame,
  [0, 18],
  [0, 1],
  { extrapolateRight: 'clamp' }
);
YOUR TURN

Scrub the title reveal. Find the frame where the first word settles, then adjust its stagger so the final word lands before the composition ends.