Prompts & workflows

Brief your agent, work with existing artwork, refine motion, and build animations for websites, campaigns, and explainers.

A useful brief gives your AI agent a clear result to aim for. Start small, check the motion, and refine the same scene before exporting.

Write a useful brief

Include the subject, canvas size, duration, visual style, motion, and delivery format. Tell the agent what to preserve when you supply artwork.

Create [subject] for [where I will use it].
Canvas: [width × height]. Duration: [seconds].
Style: [colors, shapes, mood].
Motion: [what happens, in what order, and whether it loops].
Keep: [parts of the supplied artwork that must stay unchanged].
Sound: [optional audio file, when it starts, and how it fades].
Deliver: [Lottie JSON, dotLottie, MP4, transparent WebM, or PNG].
Show a filmstrip before exporting.

Choose the output early. An animation intended for Lottie export needs a structure the format can represent.

Website and app motion

Build a matching set of interface animations

Create loading, success, and empty-state animations for a finance app. Use a 256 × 256 canvas, rounded shapes, and a teal and navy palette. Make each animation last one to two seconds. Keep each animation separate, give it a name, and show filmstrips. Deliver three Lottie JSON files.

Refine: “Keep the shapes and colors. Make the success state settle more gently and hold its final pose for half a second.”

Animate an illustration

Animate this SVG hero illustration into a six-second loop. Drift the clouds, lift the sun slightly, and sway the foreground leaves. Preserve the composition and brand colors. Show me a filmstrip, then export Lottie JSON for my landing page.

Check: inspect the first and last frames together. Ask for an MP4 preview to judge the loop at playback speed. SVG gradients often import with their own transform, which Lottie export refuses, so ask the agent to check Lottie compatibility right after the import.

Brand and campaign graphics

Bring a product image to life

Use this transparent PNG cutout for a four-second product loop on a 1080 × 1080 canvas. Float it gently, add a slight tilt and a soft moving shadow, and leave room around the product. Export transparent WebM for a website overlay.

Refine: “Reduce the tilt, keep the product centered, and slow down the vertical movement.”

Make a short launch promo

Build a 15-second, 1080 × 1920 launch promo using my product PNGs, logo, and these headlines. Set the headlines in the attached brand font. Start with a visual hook, reveal the product, show two benefits, and hold the final call to action. Preview the key moments before exporting an MP4 and a full-size PNG cover.

Headlines are editable text, so you can change the words in a later request. Supply a brand font as a TTF, OTF, or TTC file the agent can read. To add music, see Add music or a sound effect.

Animate a headline

On a 1920 × 1080 canvas, reveal the headline “Text is live” one character at a time, rising into place over one second. Run a short line of supporting text along a circular path that turns slowly behind it. Hold the finished frame for two seconds. Show me a filmstrip, then export an MP4.

Check: ask for a filmstrip that includes the first frame of each text element's entrance. Text that should start hidden must not be visible early. For Lottie delivery, ask the agent to avoid features that export only to video.

Data stories and explainers

Animate a chart

Turn these values and category labels into an animated bar chart. Preserve the exact values and proportions. Grow the bars from zero, reveal categories in sequence, and highlight the largest change. Hold the final chart for three seconds. Export MP4 and a full-size PNG of the final frame.

Check: ask the agent to verify the numbers as well as the preview. An attractive chart still needs accurate data.

Explain a process

Create a 12-second animation of an order moving from checkout to packing to delivery. Use these three icons and a short label for each step. Draw the connecting paths progressively and move a colored pulse through each step. End with the complete process visible.

Refine: “Keep the first two steps. Give the delivery stage two more seconds and hold the finished diagram.”

Sound, timing, and checks

Add music or a sound effect

Add the attached MP3 as background music from the start of promo. Fade it out over the last second. Show me a filmstrip, then export promo.mp4.

Supply an MP3, WAV, Ogg, FLAC, AAC, or M4A file that the agent can read. An agent that can upload files imports it with creator_import_media, up to 8 MiB; otherwise the agent passes the file's contents in its request, so keep it below roughly 3 MiB and trim longer audio first. A sound starts at the time you choose and can run until the animation ends, but a shorter sound does not loop. The agent can trim it, start it later, skip into it, change its speed, and fade its volume in or out. MP4 and WebM exports mix every sound into one soundtrack, and Lottie and dotLottie exports carry the sounds. Filmstrips are images, so ask for an MP4 to hear the result.

Freeze, reverse, or slow down part of a scene

In promo, move the logo animation into its own nested composition if it isn't one already. Play it at half speed, then hold its final frame until the end. Show me a filmstrip.

Time changes like this apply only to a nested composition: a scene placed inside another. The agent can freeze a frame, play it backwards, slow it down, or ramp its speed, and the result exports to Lottie. Sound inside that nested composition follows the same timing in video exports.

Check the moments that matter

Show me a filmstrip at 2.9, 3.0, and 3.1 seconds so I can check the cut between the first two scenes.

Filmstrips sample evenly by default, so a short event can fall between tiles. Name 1 to 25 exact times to see both sides of a cut, a peak, or the moment a headline lands. If text runs off the canvas in a previewed frame, the agent receives a text_clipped warning that names the text, the edge, and the times.

Refine an existing animation

Supply SVG, Lottie JSON, dotLottie, or Rive .riv data that your agent can read. dotLottie imports its initial animation and its bundled images and sounds. PNGs can be added as image assets. Lottie text layers import as editable text. Text whose glyph outlines are embedded in the file keeps its look; otherwise, supply the fonts it uses, or it is drawn in the bundled font. SVG text imports as outlined shapes. Ask the agent to inspect import warnings and show a preview before making changes.

Import this Lottie JSON as a new animation called onboarding. Describe the compositions and name the main elements. Show a filmstrip and tell me whether anything was omitted during import.

Then target a specific edit:

In onboarding, keep the scene and timing. Change the background to navy and make the named accent shapes teal. Show a new filmstrip before exporting.

Attaching a file to a chat does not always make its bytes available to tools. If the agent cannot read it, use a client with file access or provide SVG or Lottie JSON as text. Ask it to confirm that the asset was loaded before continuing.

Keep revisions focused

When you want to…Ask your agent to…
Continue after reconnectingList your documents, select the same document ID, and inspect the existing scene.
Change one elementFind the named element and edit it in place, preserving the rest of the scene.
Point at what to changeShow the animation playing, comment on the element in the preview card, then select Send to chat.
Change how motion feelsEase out (leave fast and settle) or ease in (start slowly and arrive at full speed) on the named element.
Explore a new ideaUse a separate named document so it stays independent of the current animation.
Make a vertical versionAdjust the composition dimensions and layout, then preview it. Export size alone does not reframe a scene.
Keep several deliverablesUse distinct file names such as hero-v1.mp4 and hero-v2.mp4.

In Claude and ChatGPT, the preview card lets you play the animation in the chat and send comments to the agent.

The document persists on the server, and each saved change is a revision you can go back to: ask the agent to list the document's history and restore one. Resetting a document clears its scene and output files, so save anything you want to keep first.

Ready to deliver? Choose your export format and save destination.

Last updated: November 9, 2026 at 9:37 AMEdit this page