Read each step, do the action, then hit Got it → to unlock the next one. Checkpoints ask if it worked — be honest.

The frame model

Every Remotion composition has: → fps — frames per second (we use 30) → durationInFrames — total length in frames → width × height — pixel dimensions A 9-second video at 30fps = 270 frames. Inside your component, useCurrentFrame() returns the current frame number (0 to 269). Your job is to use that number to control what appears on screen. Frame 0: title is off-screen below Frame 15: title is fully on screen (0.5 seconds in) Frame 250: title starts fading out Frame 270: end You describe where every element is at every frame. Remotion handles the playback and the export.

Once the frame model clicked, every animation problem became a math problem. Where should this text be at frame 15? At frame 30? Interpolate between those two points. That's the whole system.

Ask George

AI Assistant

How can I help?

I'm George, your vibe coding assistant. Ask me about your stack, workflows, or this lesson.