Making scroll-stopping videos with Replit Animation

Updated at:

The Replit Team

The Replit Team

In February, we launched Replit Animation: enabling anyone to create motion-style videos within minutes. This would normally take days with expert tools like After Effects. Replit Animation based videos have since generated over 10M organic impressions for Replit.

Many people have asked how Replit uses Replit Animation, so they can get the most out of the product. This guide walks through the workflow we’ve found works best, from first prompt to final, scroll-stopping output.

Getting started

When creating an animation, your first prompt can be as simple as*"make an animation about [product name],"* or as detailed as pasting a full PRD about a product and asking the Agent to make an animation about it.

A few recommendations:

Don't over-script your first prompt
The Agent actually does best when it’s not given scene by scene instructions of exactly what animations you want. Let the Agent be creative. Give it all the context about your product, but don’t be too prescriptive with the frame by frame, especially for the first output.

If your first output is way off, start fresh
Rather than trying to wrestle a bad first version into shape, go back to the homepage and submit a new prompt. A clean start usually gets you closer to what you want, faster.

Provide brand assets to achieve brand consistency
If you want the output to reflect your visual identity, paste in your brand design guidelines (a link to your website, import your Figma, screenshots, etc). The Agent will incorporate them.

Add your product assets to incorporate your product in the animation
If you're showing a product for a demo video, you can drop in screenshots or Figma exports. This part usually takes a round or two to get right. If you’re promoting a product you built on Replit, you can create an animation in the same project and it’ll already have the actual product UI.

Iterating on scenes

Your first output won't be perfect: plan on a few rounds of iteration. Watch the full animation and note what isn't working. Common things to flag:

  • A scene that feels static or boring
  • A scene that's redundant or unnecessary
  • A transition that's jarring or abrupt
  • Missing context (like a user flow or feature demo)
  • Text on screen being too small/large

Then describe what you want changed in plain language:

"Make the first scene much more dynamic. Cut the third scene. Add a new one showing the user flow. Smooth out the transition on the final scene. Double the size of text in all scenes."

You don't need to be technical. Just tell the Agent what's boring or broken and what you'd rather see instead.

Using the Canvas

If you are iterating a lot and finding it annoying to rewatch the video over and over just to tune a specific scene, try using the Replit Canvas. Ask the Agent “please put this entire animation on the Canvas, with each scene as a different frame.”

Then, you’ll have a whole board of every scene in your video. You can ask the Agent “make 3 more variations of this scene with different copy and animations” or “add another scene between these two.” It makes it easier to iterate fast.

At the end, just tell the Agent “stitch together these frames from the Canvas back into the full animation” and it’ll get the final video ready.

Refining transitions

Transitions are what separate a rough draft from something that feels polished. Here are some prompts that consistently improve output quality:

  • "Make this much more animated at the start"
  • "Make this look like a professional motion agency designed it."
  • "Make the transitions smoother and more dynamic."
  • "Add more interesting animations and moving elements. I want the scenes to feel alive."

When you want to be more specific about the type of motion, these keywords are useful:

spinning · explosion · text reveal · slide · expand into camera · expand away from camera · bounce · shimmer · spring

You can combine them freely: the Agent understands how to layer these effects together.

Adding music

If you want a soundtrack, you can upload the audio file directly to the Agent. It will handle the sync. If you don’t have an audio track, you can generate a track using an AI tool like Suno.

Exporting

You can click the export button at the top right of the preview to use Replit’s native renderer and download tool. This renders your video (can take a couple minutes) and then downloads it automatically. Export includes audio as well.

Another option is to screen record your animation while it’s playing. This often results in a smoother frame rate and gives you more flexibility. For example, you can open the animation in a new tab, resize the window to your desired dimensions, and record it in a custom aspect ratio.

Summary

The overall workflow for creating animations is: prompt → watch → give feedback → repeat. Most of the skill here isn't in writing the perfect first prompt - it's in being specific about what you want changed after each round. The more clearly you describe what's not working and why, the faster you'll converge on something good.

Try creating your first animation today!

More