Live demo: the word aimotions in one of the reactive styles: Bulge Warp Grid · Reactive

A visual library of text animation styles.

195 motion references, live and built in code. Each one comes with a prompt to recreate it with any AI.

Browse all 195 ↓
195 shown

Reactive Styles, 16 styles

All Reactive styles →
001ReactiveSVG

Bulge Warp Grid

op art hover · bulge distortion text · gravity well cursor · lens warp lines

Details →
009ReactiveCSS

Magnetic Letters

magnetic text effect · magnetic hover · cursor attraction text · spring letters

Details →

Ink & Hand-drawn, 16 styles

All Ink styles →
019InkCanvas

Charcoal Lift-Out

charcoal drawing animation · smudged charcoal text · subtractive drawing · eraser drawing

Details →
023InkWebGL

Ink in Water

ink in water effect · ink drop animation · smoke text reveal · fluid ink title

Details →
028InkCanvas

Pointillist Dots

pointillism text · dot painting animation · stipple lettering · neo-impressionist type

Details →
029InkCanvas

Sumi-e Ink Brush

ink wash painting · japanese brush calligraphy · shodo brush stroke · dry brush text

Details →
031InkCanvas

Wax Crayon Doodle

crayon drawing animation · kids drawing text · childlike doodle · hand drawn crayon lettering

Details →
Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Paper & Craft, 16 styles

All Craft styles →
038CraftSVG

Origami Fold

origami text · folded paper letters · paper fold animation · paper plane reveal

Details →
041CraftCSS

Pop-Up Book

pop up book text · paper pop up letters · popup card animation · paper engineering

Details →
045CraftCanvas

String Art Board

string art text · nail and thread art · thread wrapped letters · pin and string

Details →

Retro Computing & Games, 16 styles

All Retro styles →
062RetroCanvas

Tape Loading Screen

cassette loading screen · 8-bit computer loading · tape loader border stripes · loading bars border

Details →

Analog Video & Glitch, 16 styles

All Analog styles →
Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Print & Design Movements, 16 styles

All Print styles →
090PrintWebGL

Op Art Moiré

moire pattern · op art · optical illusion text · concentric circles illusion

Details →
095PrintCSS

Swiss Grid Layout

international typographic style · swiss style poster · swiss design · grid system layout

Details →

Kinetic Typography, 17 styles

All Kinetic styles →
098KineticCanvas

Echo Trails

echo text effect · repeating text trail · stacked color echo · motion trail typography

Details →
107KineticCanvas

Shatter & Rewind

shattering text · glass break text effect · text explode and reassemble · broken glass typography

Details →
109KineticCSS

Slice & Split

sliced text animation · split text effect · text slice transition · horizontal band split

Details →
111KineticCSS

Stomp Cut Edit

stomp text animation · fast cut typography · beat synced text · punchy promo titles

Details →

Materials & 3D, 17 styles

All Material styles →
118MaterialWebGL

Ferrofluid Spikes

ferrofluid text · magnetic liquid · black liquid spikes · magnetic fluid animation

Details →
120MaterialWebGL

Gold Foil Emboss

gold foil text · hot foil stamping · embossed gold letters · luxury gold type

Details →
Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Generative & Math Art, 17 styles

All Generative styles →
137GenerativeCanvas

Flow Field Trails

perlin noise flow field · particle flow · vector field art · generative particles

Details →
142GenerativeCanvas

Ridgeline Terrain

ridgeline plot · stacked line terrain · line landscape · hidden line rendering

Details →

Light & Shaders, 16 styles

All Light styles →
153LightWebGL

Kaleidoscope

kaleidoscope effect · mirror symmetry · mandala animation · psychedelic pattern

Details →

Film Titles & Animation, 16 styles

All Cinema styles →
167CinemaWebGL

Film Noir Blinds

film noir title · venetian blind shadows · noir lighting · black and white detective

Details →
174CinemaWebGL

Multiverse Comic

comic book animation · offset print effect · misregistered cmyk · halftone animation

Details →
175CinemaCSS

Pastel Symmetry

symmetrical pastel film · dollhouse aesthetic · whip pan transition · centered composition

Details →
178CinemaCSS

Space Opera Crawl

opening crawl · scrolling text in space · perspective text scroll · sci-fi intro text

Details →

Sci-fi UI & Modern Web, 16 styles

All Interface styles →
185InterfaceWebGL

Gradient Mesh Hero

gradient mesh · mesh gradient animation · animated gradient background · fluid gradient

Details →

How it works

  1. Step 01Pick a style

    Browse 195 live demos. Filter by category, technique, energy or background, or search by name and alias.

  2. Step 02Copy the prompt

    Each prompt describes composition, type, palette, texture and timing, never a specific tool, so it travels anywhere.

  3. Step 03Paste & replace [TEXT]

    Drop it into your AI model with your word, and ask for the format you need: HTML, a component, a shader or a designer brief.

Guides

FAQ

What is aimotions?

aimotions is a free library of 195 motion graphics styles built in code. Every style has a live demo that animates the word “aimotions” and a tool-agnostic prompt you can paste into a frontier AI model to recreate the look with your own text.

How do I use a style prompt?

Click “Copy prompt”, replace [TEXT] with your own word or brand name, and paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model. Add the output you need, for example “as a single HTML file”, “as a React component” or “as a brief for a motion designer”.

What does tool-agnostic mean?

The prompts describe the look and the motion (composition, typography, palette, texture, timing and easing) instead of a specific technology. The same prompt works for CSS, SVG, Canvas or WebGL code, for motion design software, or as a brief for a human designer.

How do I make an animated title for my website?

Open any style and click “Copy for website title”: it copies the prompt plus a brief asking for a real, responsive, lightweight, accessible and SEO-friendly heading. Replace [TEXT] with your title and paste it into your AI model. The “Animated website titles” guide walks through it step by step.

What is an AI animation prompt?

A written description of an animation (composition, typography, palette, texture, motion and timing) precise enough for an AI model to recreate it. Every aimotions style comes with one, and the guide “How to write AI animation prompts” includes a template for writing your own.

Which AI models can recreate these styles?

It takes a frontier model with strong coding skills: Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or newer versions. Older or smaller models usually fall short on these prompts. For complex shader or physics styles, ask the model to iterate and to keep the animation looping seamlessly.

Can I use the prompts in commercial projects?

Yes. The prompts are free to copy, adapt and use in personal and commercial projects, with no credit required. Republishing the collection or a substantial part of it (for example as another library or a dataset) requires written permission.

How are the demos made?

Every demo is built in code with CSS, SVG, Canvas 2D or WebGL and runs live in your browser. There are no video files. Previews show a still frame and come alive when you hover over them (on touch screens, while they are on screen), and the “Motion” switch stops all of them.

Does aimotions track me?

No. aimotions sets no cookies, uses no analytics and loads no third-party scripts. Your motion preference is stored only in your own browser.

Is aimotions available in Spanish?

Yes. The whole library, including every prompt, is available in Spanish at aimotions.art/es/, or through the EN/ES switch in the header.

How can I support the project?

aimotions is free and funded by donations. If a prompt saved you time, you can buy me a coffee on Ko-fi. It helps pay for hosting and new styles.

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥