Animate Text with Agent

We curate a set of text effects, packed as a skill for you to quickly pick and apply - use the skill pack and have your agent modify it so you don't have to burning tokens on trial and error.

These are not videos you have to re-record or GIFs you can't touch - every effect above is a single, self-contained animated SVG file. That means an AI coding agent like Claude Code, Cursor or Codex can open it, read it and change it the same way it edits the rest of your code.

To make them even easier to use, we bundled them into a skill pack - install it once and your agent can use every effect right away. To see how it works, watch this short video:

Free Perks PackDownload the skill pack for your AI agent ( .zip, 2.5MB )

What's in the Pack

Our animated text presets library collects nearly five hundred text effects, where you can search them quickly, save your favorites and edit them online. From these we hand-picked 105 effects, one for each style with no two alike, and packed them together with a prompt that tells your agent how to use them.

Every effect in the pack is named by its preset id - the same id you see under each effect in the preset library ( click it to copy ):

loadingio-animated-text-presets/
  SKILL.md                    instructions for Claude Code ( installs as a skill )
  AGENTS.md                   notes for other AI agents: how the files are built and what to keep
  README.md                   how to use the pack
  index.json                  every effect: id, name, category, tags, description
  presets/
    fireworks-vm758f/
      fireworks-vm758f.svg    the animated effect
      preview.webp            a still frame, to browse quickly
    glitch-e7o2u1/
    kinetic-eipvbo/
    ...

( The library online has more effects than the pack, so you may pick one that isn't in it. Almost every style has an effect in the pack, though, so your agent uses the pack's effect of the same style - or the closest one for the few styles that aren't included. )

Each SVG has its animation built in ( CSS keyframes inside the file ) and needs no JavaScript, fonts or other files - drop it into a web page, a slide or a design tool and it just plays. The letters are drawn as shapes, so it looks exactly the same on every device.

Your Own Words, Fonts and Colors

Strictly speaking, your agent can do all of this on its own - the effect is just code. We simply host tools that make the common edits quicker, so you don't have to set them up on your computer:

Text - open the effect on its preset page, type your words and it re-renders instantly in the effect's own font, other languages included. It is a regular tool, not AI, so it costs no tokens - and it is free with no limits.
Fonts - switch to another font from our quick picker with a live preview ( a Pro feature ). Have a font file of your own? Your agent can apply it locally just as well.
Colors - try our built-in palettes in one click, or recolor each part of the effect yourself.
Size and format - download in landscape or portrait as SVG for free, or as MP4, WebM, WebP or APNG with a subscription.

Then hand the downloaded file to your agent for the rest. Online for the quick picks, your agent for the fine details.

How to Use It

Download the pack and unzip it into your project ( or any folder ).
Open the folder with your AI agent - with Claude Code, put it in your skills folder and it is picked up as a skill.
Tell it which effect you want and what to change - in plain words, as you would ask a designer. Give the preset id if you have one; otherwise just describe the style ( "a festive intro", "something like a news ticker" ) and the agent picks from the pack.

The included SKILL.md and AGENTS.md explain the file structure to the agent ( which parts are the letters, where the colors and timing live ), so you don't have to.

Examples

Here are a few typical requests, starting from effects in the pack, and what to expect from them.

Match your brand colors

Bounce In

Use the bounce-y8motx preset and change its colors to our brand palette: #1E293B, #F97316 and #FDE68A. Keep the animation exactly as it is.

The agent finds every color in the file - letters, outlines, shadows and the background shapes - and maps them onto your palette, keeping light and dark parts in the same places so the effect still reads well. The motion is untouched.

Change the timing

Eye-Catching Cover

Take cover-bek455, make it play only once and stay on the last frame instead of looping. Also make it about 30% slower.

Timing lives in the CSS animations inside the SVG, so this is a small, precise edit: durations get longer, the loop is turned off and the final frame is held. Ideal for a banner that should settle down after the first impression.

Fit it into your page

Highlighter

Use highlight-r3amj6 as the heading of our pricing section in index.html. Remove its background so it sits on our dark section, switch the text to white, and show a still version to visitors who prefer reduced motion.

The agent removes the paper background, recolors the letters for a dark background, places the SVG in your page and adds a prefers-reduced-motion rule - three tasks in one request, because it can see both the effect and your page.

Remix the motion

Kinetic Type

Starting from kinetic-eipvbo, make the words slide in from the left instead of from below, and add a little overshoot when they land.

Bigger changes to the motion work too, since each word and letter is its own group in the file. Expect a round or two of fine-tuning here - describe what you see ( "too bouncy", "the second word is late" ) and the agent adjusts.

Why Start from a Preset?

When we start making something, we often haven't settled on a style yet. And even when we have one in mind, describing it in a prompt rarely gets us what we pictured - words like "playful" or "elegant" mean different things to different people, and to your agent.

That's why it helps to search a large set of ready-made presets for something close first. Even if you don't build exactly that effect, it gives your agent a concrete reference: it can see what you mean, instead of guessing from a description.

Of course, you can also start from scratch and settle on your style step by step. We suggest trying both. And every effect you build yourself is a step toward a style library of your own.

Tips for Asking

Name the preset and the change. "Make fireworks-vm758f loop every 4 seconds" works better than "make it faster".
Say what to keep. "Keep the motion as is" or "only change the colors" stops the agent from improving things you already like.
Look, then iterate. Open the SVG in a browser after each change. Short follow-ups like "a bit less glow" are usually all it takes.
Start from the closest effect. Picking a preset that is already 90% there saves far more time than any prompt.

When to Use the Online Editor

Simple edits don't always need an agent. On each effect's page in our preset library you can type your own words ( free, and no tokens spent ), try a large set of ready-made palettes, switch fonts with a subscription, and export straight to different animation formats - SVG, MP4, WebM, WebP or APNG - in a few clicks. Your agent could do all of these too; the editor is just the quicker way. Save your agent for the changes that really need it.

Conclusion

Writing animations from a blank prompt is slow; adjusting a good one is fast. Grab the pack, pick an effect that is close to what you need, and let your agent do the last mile - your colors, your timing, your page.