Back to HomeBack to Blog

100 animations with Claude, part 1: the free skill + full tutorial (2026)

2026-10-31

100 animations with Claude, part 1: the free skill + full tutorial (2026)

Coming from TikTok and commented ANIMATION? Welcome! 👋

I'm Ty, a full stack web2 and web3 developer, and here I share all my tips, for free. Today: a Claude skill that knows 100 animation styles, plus everything you need to use it, even if you've never coded.

⬇️ Download the skill (animation.zip), free

100 Claude animations, part 1/5

What's a Claude skill?

A skill is a small folder of instructions that turns Claude into an expert on a specific topic. This one holds 100 technical sheets I prepared: for each style, the exact technique, the right values (colors, durations, easing curves) and a working code example.

The result: you type /animation glitch "My text", and Claude knows exactly what to do.

What you (really) need

To preview and test animations

To export real MP4 videos (TikTok, Reels)

Prices (October 2026, US prices before tax):

Mac or PC? Both! Claude Desktop runs on Mac and Windows.

The video engine, Remotion, is free for individuals and teams of up to 3 people. Beyond that, you need a Remotion company license.

🧩 What about "npm" installs? You don't type a single command.

  • On claude.ai: nothing to install at all, Claude runs the code in its own environment.
  • To export MP4s (Claude Desktop, Code tab): you need Node.js. It's the engine that lets your computer run JavaScript code, and therefore build the video. It's free and installs like any app. No need to know how: just tell Claude "Install Node.js for me", it takes care of it or walks you through it step by step.
  • Then Claude installs Remotion and the npm packages it needs on its own (npm install); it just asks for permission and you click "Allow".

Video tutorial: install the skill in 1 minute

Tutorial: install the animation skill in 1 minute

Method 1 — No code, on claude.ai (previews)

  1. Download animation.zip. Don't unzip it.
  2. On claude.ai, open Settings → Capabilities and turn on "Create and edit files" (code execution). Skills need it.
  3. Go to Customize → Skills, click + → Create skill → Upload a skill and pick animation.zip.
  4. Make sure animation is toggled on in the list.
  5. New chat: /animation glitch "BTHA SYSTEM". Claude shows you the preview.

Method 2 — Everything in plain language with Claude Desktop (MP4 videos)

My favorite way: I design, I describe, Claude executes. Not a single command to remember.

  1. Install Claude Desktop and sign in with your Pro account.
  2. Open the Code tab. That's Claude Code, already built into the app.
  3. Pick an empty folder, for example Documents/my-animations.
  4. Just type:

"Install the animation skill from github.com/Ty-HA/claude-animations into my personal skills."

"Check that Node.js is installed, otherwise install it for me."

"Create a Remotion project and make me a 5-second TikTok video in synthwave style with the text "My business", then export it as MP4."

  1. Claude asks for your approval before each action. Approve, and your video lands in the out/ folder.

Then adjust it like you'd talk to an editor: "faster", "use my colors", "add my logo", "same thing in neon".

Part 1: the first 20 styles

  1. Kinetic type — /animation kinetic-type
  2. VHS glitch — /animation glitch
  3. Text decrypt — /animation scramble
  4. Split-flap — /animation split-flap
  5. Sci-fi HUD — /animation hud
  6. Particles — /animation particles
  7. Metaballs — /animation metaballs
  8. Cyberpunk neon — /animation neon
  9. Aurora — /animation aurora
  10. Glassmorphism — /animation glassmorphism
  11. 3D wireframe — /animation wireframe
  12. 3D cards — /animation card-flip
  13. Synthwave — /animation synthwave
  14. Pixel art — /animation pixel-art
  15. Manga — /animation manga-speed-lines
  16. Data storytelling — /animation data-story
  17. Counters — /animation odometer
  18. Animated chat — /animation chat
  19. Live code — /animation code-typing
  20. Fireworks — /animation fireworks

📅 A new part every day for 5 days, with 20 new styles each time. Part 2 is out tomorrow: the link will be added here as soon as it's live. Follow me so you don't miss it!

For developers 💻

The repo is open source (MIT): github.com/Ty-HA/claude-animations.

Install through the Claude Code plugin marketplace:

/plugin marketplace add Ty-HA/claude-animations
/plugin install animation@bthasystem

Or copy it manually for the short /animation command:

git clone https://github.com/Ty-HA/claude-animations.git
cp -r claude-animations/skills/animation ~/.claude/skills/

Default stack: Remotion (React), 1080×1920, 30 fps. Each sheet includes a deterministic component (useCurrentFrame, interpolate, spring, seeded random()) ready to render.

🪙 How many tokens it uses (and how to optimize)

I'd rather be upfront: every animation uses tokens, so part of your Claude quota. Here are the real numbers, measured on the skill files (≈ 3.6 characters per token).

A simple animation, done cleanly: about 10,000 to 20,000 tokens. With 3 or 4 rounds of fixes, expect 30,000 to 60,000: on every new message Claude re-reads the whole conversation (mostly from cache, which is cheaper, but it still counts).

Why the skill is already optimized: the 100 sheets total ~74,000 tokens, but Claude only loads one at a time. Result: ~4,000 tokens instead of ~78,000, about 95% savings compared with one giant "all-in-one" prompt. That's the whole point of skills: progressive loading.

My 8 tips to save tokens

  1. Say everything in the first message: style, text, format, length, colors. /animation neon "OPEN 24/7" 9:16 5s pink and cyan saves 2 or 3 back-and-forths.
  2. One conversation = one animation. Long conversations get more expensive with every message. New animation → new conversation (or /clear in Claude Code).
  3. Check with a single frame, not a full video or 10 screenshots: "just render frame 30 and look at it".
  4. Give precise fixes: "the text overflows on the right, reduce it to 90px" costs far less than "it's not good, redo it".
  5. Pick the right model: a lighter model (Sonnet, even Haiku) is enough for a simple animation; keep the most powerful one (Opus) for complex creations or big projects.
  6. Don't paste big files into the chat: give the file path, Claude will read only what it needs.
  7. Reuse: ask Claude to save each successful animation as a reusable component instead of regenerating it for every video.
  8. Watch your usage: in Claude Code, /context shows what fills the conversation's memory and /usage shows your plan quota.

On a Pro or Max plan you don't pay per token: you get a quota that refills. These tips just let you do a lot more with the same plan.

FAQ

Is it really free? The skill, yes, 100% (MIT license). You only need a Claude plan; Pro covers everything.

I don't have a Mac. No problem, everything works on Windows.

Does it work on my phone? So far I found no official confirmation that custom skills work in the mobile app. Use a computer.

I get a "node" error while rendering. Install Node.js (LTS) from nodejs.org, quit and reopen Claude Desktop, then try again. Or paste the error to Claude: it'll walk you through it.

/animation or /animation:animation? Via claude.ai or manual copy: /animation. Via the plugin marketplace: /animation:animation. And you can always write "make me a glitch animation".

Can I use the videos for clients? Yes. Just check the Remotion license if your organization has more than 3 people.

Want to go further?

I'm a full stack web2 and web3 developer: websites, apps, dApps, AI integrations and custom automations. Want animations in your brand colors, a site that truly moves, or a Web3 project?

👉 See my services and contact me on bthasystem.io

BTHA System, end of transmission. ✨

Related Links