Charlie Hills
← All guides

Free toolkit · AI Image & Video

42 CSS Motion Recipes You Can Paste Anywhere

Every animation from the Every Motion Claude Can Make board, as copy-paste CSS. 42 recipes across 7 families, a starter file that runs them, and the loop rule that stops a GIF freezing on a half-empty first frame. No JavaScript, no library, no install.

Charlie Hills Added 9 August 2026 · Free

What’s inside

  1. 1Watch all 42 first
  2. 2The starter file
  3. 3Three ways to use one
  4. 4The one rule that makes them loop properly
  5. 5The 42 recipes
  6. 6Put it inside your own Claude

Watch all 42 first

Each one is playing live below, with its code beside it. Scroll it, find the one you want, then come back up for the starter file.

The starter file

Save this as motion.html anywhere on your machine and open it in a browser. Every recipe on this page drops into the two marked spots.

<!doctype html><meta charset="utf-8">
<style>
:root{--mono:ui-monospace,'SF Mono',Menlo,monospace;}
body{background:#00132F;display:grid;place-items:center;height:100vh;margin:0;
     font-family:system-ui,-apple-system,sans-serif;}

/* the frame. One recipe sits inside this */
.r{--c:#58B6FF;                /* the accent colour, change this */
   width:340px;height:210px;background:#061428;border-radius:10px;overflow:hidden;
   display:flex;align-items:center;justify-content:center;padding:14px 18px;}

/* shared base. Every recipe needs these six rules */
.m{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--c);}
.m svg{width:100%;height:100%;fill:none;stroke:var(--c);stroke-width:2.6;
       stroke-linecap:round;stroke-linejoin:round;}
.m b,.m i,.m u{display:block;}
.od{display:inline-block;height:1em;overflow:hidden;line-height:1;vertical-align:top;}
.od u{display:block;height:1em;line-height:1;text-decoration:none;text-align:center;}
.od .rl{display:block;}

/* ▼ PASTE THE RECIPE CSS HERE ▼ */

</style>

<div class="r">
  <!-- ▼ PASTE THE RECIPE HTML HERE ▼ -->
</div>

That’s the first part. The rest of this guide is free too.

More on AI Image & Video

Prompt · 6 parts

9 Video Effects for Claude

Every effect from the reel as a prompt you paste into Claude Code, with the real result under each one.Read the guide →Guide · 6 parts

Claude video editing: the 7 installs and the prompt

Every install from the reel as one line you paste into Terminal, plus the full prompt word for word.Read the guide →Toolkit · 11 parts

20 Video Effects for Claude

All 20 video effects as free Claude skills, plus the one download that installs them.Read the guide →Prompt · 1 part

5 Creator Editing Styles You Can Copy With Claude

Five style files for Claude Code, one per creator (MrBeast, Alex Hormozi, Steven Bartlett, Dan Koe, GaryVee). Each one adds a single editing device over your own talking head.Read the guide →Prompt · 3 parts

Claude edited this video: the prompts and my full editing process

The prompts and my full editing brief behind the video Claude edited for me.Read the guide →Prompt · 5 parts

5 fixes for Claude motion graphics that look like AI slop

Real data, one font, one icon pack, Lottie files and the MP4 export. The five from my reel, with the prompts.Read the guide →