Note: This article assumes that you already have a Claude Code subscription. If you don’t, or if you’re not familiar with Claude Code yet, I recommend completing the first module of this free course before continuing.

I am a backend developer by trade. I know nothing about motion design. Yet it only took me a couple of hours to animate PixelWatcher’s logo:

Remotion

Remotion is a tool for creating videos with React. I don’t know the first thing about React, but that’s OK because Remotion recently released some agent skills, meaning we can now prompt Claude in natural language to create animations.

The other good news? Anything you create with Remotion is free for commercial use for individuals and companies of up to three people.

To get started with Remotion and Claude Code, follow these steps and come back here when Claude is running in your project’s folder.

Animate your logo

Now the fun part. Get a picture of your logo (preferably an SVG for scalable graphics, but other image formats work too). Place it in the public/ folder of your project so it is registered as an asset.

Now use the following prompt to create a composition from your logo:

This is a Remotion project, so use the Remotion best practices skill. Start a new composition from @public/logo.svg, using the same dimensions as the image

Claude will create the composition. Once it’s done, specify which parts of the image you’d like to animate.

This is the prompt I used for PixelWatcher’s logo:

Let's separate the various components of the animation. The isolated black square hanging from the bottom of the larger, rounded square is one. The rest of that rounded square and its contents are another. Then there's the "ixelWatcher" text, which is another component. And finally, the "Never miss a change." tagline is the last component

Claude will proceed to create separate components for each of those, naming them in the process. Feel free to change the names for something more descriptive – the trick is that you can now refer to each component by name to animate them separately.

Here are some example prompts I used:

The animation will start with MainLogo and HangingSquare zoomed in at the centre of the composition. The other components aren't displayed.

Let's animate the HangingSquare. It starts as if it were part of MainLogo's outer black outline, and eases down into it final position

You get the idea.

Once you’re happy with the animation, click the “Render” button to export it as a video.

Tips

Sometimes, the exported video doesn’t match the preview exactly. If that happens, explain the issue to Claude and re-render until you’re satisfied with the result.

Don’t hesitate to ask Claude to polish up the animation:

Can you now make the animation smoother

Or to clean up after itself:

Can you now simplify and optimise the code, making sure the animation stays the same

You can also ask Claude about the effects it’s been using, or spot them in the code directly: learning and remembering the names of those effects can make for better prompting in the future.

PixelWatcher is currently under development. If you’d like updates ahead of launch and get early access, subscribe to the newsletter at pixelwatcher.io.