Videos & Animations with AI lessons

Frames per second

The frame rate is how many frames play each second, written as fps. Films use 24 fps, and most online video uses 30 or 60.

The same one-second throw drawn at 6, 12, 24 and 30 fps, with a filmstrip of its frames.

Video tools count time in frames, not seconds. To find how many frames a clip needs, multiply its length by the frame rate.

Frames in a clip: \text{frames} = \text{seconds} \times \text{fps}

So a 5 second clip at 30 fps has 5 \times 30 = 150 frames.

Practice: Count the frames

Typed answer: frames from seconds and fps, or seconds from frames and fps.

Video as code with Remotion

Remotion lets you make videos by writing React components. Your component is drawn once for every frame of the video.

A composition sets the video up. It names the component and gives the size, the frame rate and the length in frames.

A Remotion composition with each setting lit up beside what it means.

Because the whole video is code, an AI coding agent can write it and change it for you. The React basics from Web Frameworks & Stacks are all you need to read it.

From frame number to motion

useCurrentFrame() tells your component which frame it is drawing. You turn that number into a position, a size or an opacity.

interpolate maps a range of frames onto a range of values in a straight line. spring starts fast, overshoots a little and settles, like a real object.

Frame slider driving interpolate or spring, with the live code, a plot and a moving box.

Do not use CSS animations in Remotion. Every value must come from the frame number, so each frame renders the same way every time.

Practice: Complete the animation

Fill the gaps in interpolate and spring code to match each goal.

Let the AI write the scene

Describe the scene in plain words, with the timing in seconds or frames. The agent writes the component, and you check it in Remotion Studio, a preview you can scrub.

A chat where a coding agent writes a title card, then makes a requested change.

Ask for one change at a time and name the exact thing to change. "Start the fade at frame 0" works far better than "make it better".

When it looks right, one command renders it. Remotion draws every frame as an image, then joins them into an mp4 video file.

npx remotion render TitleCard out/title.mp4

Practice: Ask for the fix

Match each problem seen in the preview to the follow-up prompt that fixes it.

SVG: pictures written as text

An SVG is an image made of shapes written as text. Because it is text, an AI can write one and you can edit it by hand.

SVG code beside the picture it draws, one part lit at a time.

The viewBox sets the drawing grid. Shapes like circle and path are placed on it with numbers.

A path is a list of pen moves: M moves the pen, L draws a line, C draws a curve and Z closes the shape.

Practice: Read the path

Read a path and pick the drawing it makes, from four pictures.

Ask for SVGs you can animate

Ask a chat model for SVG code, not a flat image. Ask for a fixed viewBox, one path per part, an id on each part and your brand colours.

A logo with named parts drawn on one part at a time, beside the prompt that asked for it.

Named parts are easy to animate. You can draw a line on, slide one part in or change its colour, all from the frame number.

Read the code before you use it. Thousands of tiny points or random names like path_8812 mean you should ask again.

After Effects and an agent

After Effects is Adobe's app for motion graphics, built from layers and keyframes. It can also be controlled by scripts written in JavaScript.

An MCP server gives an AI agent new tools. Community-built ones link an agent to a small panel inside After Effects, which runs the scripts the agent sends.

Agent, MCP server, After Effects panel and composition in a stepping flow.

These bridges are young, so check one is still maintained before you rely on it. Save your project first, because the agent changes it directly.

Expressions: one line of code

An expression is a short piece of code on one property, like rotation or opacity. After Effects runs it on every frame, and time holds the current time in seconds.

Three expressions driving a layer live: time * 90, wiggle and linear.

wiggle(2, 30) shakes a value about twice a second, by up to 30. linear(time, 0, 2, 0, 100) turns 0 to 2 seconds into 0 to 100.

AI is good at writing expressions. Describe the motion you want and name the property it goes on.

Practice: Write the expression

Type the expression for a spin, a wiggle or a fade.

3D scenes with Blender

Blender is a free 3D app for models, lights, cameras and animation. Everything in it can be controlled with Python code.

Blender MCP servers let an agent read your scene and run Python inside Blender. There are community versions, and an official one from the Blender project.

A camera orbiting a cube from two keyframes, shown from above and through the camera, with a scrubbable timeline.

Rendering 3D is slow, so have the agent render one test frame first. When that looks right, render the rest.

Practice: Order the agent's steps

Put a Blender turntable job, then the finishing steps, in order.

AI voices

Text to speech tools turn a written script into a spoken voice file. You pick a voice, and many tools let you change its pace and tone.

A script read word by word, with a speed slider and the clip length and frames.

Most narration runs at about 150 words per minute. So you can work out how long a voice clip will be before you make it.

Voice clip length: \text{seconds} = \frac{\text{words}}{\text{wpm}} \times 60

Practice: Time the script

Typed answer: how long a script takes to read, in seconds or in frames.

Putting it together

An editor stacks tracks on one timeline: scenes, the voice, captions and music. They all play at once, so editing is mostly lining tracks up.

Scenes, voice, captions and music on a timeline, with the music dipping under the voice.

Cut scenes to the voice, so each picture matches what is being said. Lowering the music while someone talks is called ducking.

Captions are often saved in an SRT file. Each caption has a start time, an end time and its words.

Practice: Sync the caption

Set a caption's start and end with sliders so it matches a spoken line.

Shapes and sizes

The aspect ratio is a video's width compared with its height. 16:9 is landscape for YouTube and TVs, and 9:16 is vertical for phones.

Landscape, vertical and square frames drawn to scale, with sizes and uses.

Pick the shape before you start, because changing it later means reframing every scene. In Remotion, a second composition with a new width and height can reuse your scenes.

Export to mp4 for nearly every platform. It plays almost everywhere and keeps files small.

Practice: Pick the shape

Sort platforms and sizes into 16:9 landscape or 9:16 vertical.

Rights, consent and labels

Only clone a voice with clear permission from its owner. Many voice tools ask you to confirm that consent before they clone.

Check the licence on music, stock footage and fonts, and the terms of each AI tool. Royalty free still comes with rules.

Label realistic AI content when you post it. YouTube and TikTok ask for this, and laws such as the EU AI Act add rules for deepfakes.

Practice: Make the responsible call

Scenarios about voice cloning, music licences, labels and tool terms.

Where next

Try a full project: write a 30 second script, generate the voice and build the scenes in Remotion. Add captions and music, then render it in 16:9 and 9:16.

Keep each step small and check it before the next. Prompts with frame numbers and named parts save the most time.

To link more tools to your agent, take the MCP Servers course next.