NEW TEMPLATES / THE MOTION EDIT

Animation styles
to save.

Five ways to make your next idea move. Pick a style, copy the prompt, and share it with Claude or Codex to make it your own.

5 stylesAnimated examplesCopyable prompt templates

By toolandteaUpdated October 25, 2026

Find your style Save all 5 templates

FROM SAVED TO MADE

Start with your idea.

Add a little context. Every copy button below will include your brief.

Your idea or exact textBrand colors

Optional. The download contains the original templates; copy a prompt below to include your brief.

01Pick a style
02Copy its full prompt
03Share with Claude or Codex
04Preview & refine

01 / MOTION STUDYSTYLIZED ROUTE DIAGRAM

STYLE 01

Maps

Take them somewhere.

Try it for Travel stories, event locations, route reveals, and a journey worth following.

How to make it

Start with a map or a simple route diagram.
Draw the route, then reveal each stop as the marker arrives.
Hold on the destination before the animation starts again.

Give it two locations. If geography is not the point, ask for a stylized route diagram.

Read or select the prompt

Create a working animation using HTML, CSS, and SVG, with JavaScript where needed. Make a 6-second loop in a vertical 9:16 layout. Include a replay button and a pause button outside the animation. Make the text, colors, and timing easy to change. Respect reduced-motion preferences with a still composition.

Animate a journey from [location A] to [location B]. Draw the route gradually, move a small marker along it, and reveal each location label as the marker arrives. Use a cream background, dark outlines, and one bright accent color. Finish with a gentle zoom toward the destination. Use accurate geographic data if supplied; otherwise clearly label the result as a stylized route diagram.

Replace the bracketed placeholders using my brief. If essential details are missing, ask me before building. Show a working preview when available, provide the source files, and explain how to run them locally. Explain how I can record or export the animation; do not claim a video file exists unless you have created it.

02 / MOTION STUDYILLUSTRATIVE PREVIEW

STYLE 02

Blueprint

Show how an idea takes shape.

Try it for Product reveals, architecture, and how-it-works explainers.

How to make it

Lay down a dark blue background and a fine grid.
Draw the object in stages using thin, light strokes.
Add labels and dimension lines, then hold the finished drawing.

Pick one recognizable object. Label measurements as illustrative unless you supply real ones.

Read or select the prompt

Create a working animation using HTML, CSS, and SVG, with JavaScript where needed. Make a 6-second loop in a vertical 9:16 layout. Include a replay button and a pause button outside the animation. Make the text, colors, and timing easy to change. Respect reduced-motion preferences with a still composition.

Reveal [your object] as an animated blueprint. Start with a dark blue grid, then draw the object’s outlines in thin white strokes. Add dimension lines, small labels, and a subtle scanning effect. Reveal the parts in a deliberate sequence so it feels like an idea becoming a finished design. Use clearly illustrative measurements unless I supply real ones.

Replace the bracketed placeholders using my brief. If essential details are missing, ask me before building. Show a working preview when available, provide the source files, and explain how to run them locally. Explain how I can record or export the animation; do not claim a video file exists unless you have created it.

03 / MOTION STUDYILLUSTRATIVE PREVIEW

STYLE 03

Paper cutout

A little texture. A lot of character.

Try it for Playful explainers, cozy stories, and tactile product visuals.

How to make it

Break your scene into three to five simple paper layers.
Give the edges slight irregularities and add soft shadows.
Move the pieces in small steps, with a little rotation and depth.

Keep the scene simple. Layered shapes and soft shadows do most of the work.

Read or select the prompt

Create a working animation using HTML, CSS, and SVG, with JavaScript where needed. Make a 6-second loop in a vertical 9:16 layout. Include a replay button and a pause button outside the animation. Make the text, colors, and timing easy to change. Respect reduced-motion preferences with a still composition.

Create a layered paper-cutout animation of [your scene or object]. Use three to five layers, slightly irregular edges, soft shadows, and a limited palette. Bring each piece into the scene with a small rotation and a stop-motion feel. Add gentle movement between layers to create depth. Keep the composition simple and readable.

Replace the bracketed placeholders using my brief. If essential details are missing, ask me before building. Show a working preview when available, provide the source files, and explain how to run them locally. Explain how I can record or export the animation; do not claim a video file exists unless you have created it.

04 / MOTION STUDYILLUSTRATIVE PREVIEW

STYLE 04

Kinetic typography

Let the words do the moving.

Try it for Hooks, bold statements, announcements, and text-led reels.

How to make it

Choose a short phrase and split it into beats.
Slide, stretch, or snap the key word into place.
Leave enough time to read the complete phrase.

Start with three to six words. Give the most important word the biggest movement.

Read or select the prompt

Create a working animation using HTML, CSS, and SVG, with JavaScript where needed. Make a 6-second loop in a vertical 9:16 layout. Include a replay button and a pause button outside the animation. Make the text, colors, and timing easy to change. Respect reduced-motion preferences with a still composition.

Animate this exact phrase: “[your text]”. Break it into short beats. Use oversized typography, with words sliding, stretching, or snapping into place to emphasize their meaning. Keep every word readable and leave enough time to absorb the full phrase. Use one accent color for the key word. Do not add or rewrite the supplied text.

Replace the bracketed placeholders using my brief. If essential details are missing, ask me before building. Show a working preview when available, provide the source files, and explain how to run them locally. Explain how I can record or export the animation; do not claim a video file exists unless you have created it.

05 / MOTION STUDYILLUSTRATIVE PREVIEW

STYLE 05

Liquid morph

One shape. More possibilities.

Try it for Logo reveals, abstract transitions, and product intros.

How to make it

Choose two simple silhouettes with a clear transformation.
Stretch and soften the shape as it changes.
Let it settle, then return smoothly to the opening frame.

Start with simple shapes. Supply your SVG when you want to use a specific logo.

Read or select the prompt

Create a working animation using HTML, CSS, and SVG, with JavaScript where needed. Make a 6-second loop in a vertical 9:16 layout. Include a replay button and a pause button outside the animation. Make the text, colors, and timing easy to change. Respect reduced-motion preferences with a still composition.

Create a liquid morph animation that transforms [shape A] into [shape B]. Use smooth, organic motion with a metallic or glossy finish. Let the shape stretch, merge, and settle before returning to its starting form for a seamless loop. Keep the background minimal. If exact logo morphing needs an SVG, ask me for it rather than inventing the logo.

Replace the bracketed placeholders using my brief. If essential details are missing, ask me before building. Show a working preview when available, provide the source files, and explain how to run them locally. Explain how I can record or export the animation; do not claim a video file exists unless you have created it.

ONE MORE PROMPT

Make the first draft
feel more like you.

Get the movement right, then add detail. Attach your own reference when you want a closer match.

SAVE THE STYLE. MAKE SOMETHING WITH IT.

Which one is your favorite?

Comment the style you liked the most on the reel,
and I’ll share how you can make it too.

Find @toolandtea

Common questions

What do I save or share with Claude or Codex?

Copy a full prompt from your chosen style, or download the five-template prompt pack. Add your idea, words, colors, and any reference images. The pack contains editable instructions for building an animation.

Are the previews the finished templates?

The previews are small motion studies to help you choose a direction. The prompts describe a fuller animation that you can build and customize for your own project.

How do I turn the result into a reel?

Ask for a vertical 9:16 composition, check the timing and text, and record the clean preview or ask your coding assistant to add an export workflow. Confirm that the video file plays correctly before posting.

About these templates

Style selection and script by toolandtea. The previews are original illustrations made with CSS and SVG; the map is a stylized route diagram. Prompts are editable starting points, and the results depend on your brief and the tool you use.

Start with your idea.

Maps

How to make it

Blueprint

How to make it

Paper cutout

How to make it

Kinetic typography

How to make it

Liquid morph

How to make it

Make the first draftfeel more like you.

Which one is your favorite?

Common questions

What do I save or share with Claude or Codex?

Are the previews the finished templates?

How do I turn the result into a reel?

Make the first draft
feel more like you.