# 5 animation styles to save By toolandtea · https://toolandtea.com/guides/animation-styles Pick one style. Replace the bracketed placeholders with your idea, then share the full prompt with Claude or Codex. Add your brand colors and any references. Preview, refine, and ask how to record or export the finished animation. These are prompt templates, ready to customize. ## 01. Maps Take them somewhere. 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. Blueprint Show how an idea takes shape. 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. Paper cutout A little texture. A lot of character. 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. Kinetic typography Let the words do the moving. 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. Liquid morph One shape. More possibilities. 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. ## Refine the result - Slow the animation down and make the main idea clearer. Keep the full phrase readable. - Match the colors and typography in my attached reference while keeping this animation style. - Make the opening frame stronger and the ending loop seamlessly back to it. - Show me the preview and explain how to record or export this animation as a video. Comment the style you liked the most on the reel, and I’ll share how you can make it too. https://www.instagram.com/toolandtea/