Back to HomeBack to Blog

100 animations with Claude, part 2: 3D galaxy, ASCII, liquid metal… (free skill)

2026-11-01

100 animations with Claude, part 2: 3D galaxy, ASCII, liquid metal… (free skill)

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, part 2 of 5 of my series: 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 2: styles 21 to 40

  1. 3D galaxy — /animation galaxy
  2. ASCII art — /animation ascii
  3. Liquid metal — /animation liquid-chrome
  4. Typewriter — /animation typewriter
  5. Flow field — /animation flow-field
  6. Holographic foil — /animation holo-foil
  7. Y2K chrome — /animation y2k
  8. Comic book — /animation comic
  9. Retro psychedelic — /animation psychedelic
  10. Bento grid — /animation bento
  11. Bar chart race — /animation bar-race
  12. Notifications — /animation notifications
  13. Whip pan — /animation whip-pan
  14. Zoom punch — /animation zoom-punch
  15. Light leak & lens flare — /animation light-leak
  16. 3D extruded text — /animation extruded-text
  17. Risograph — /animation risograph
  18. Ink in water — /animation ink-water
  19. Sticker pop — /animation sticker-pop
  20. Confetti rain — /animation confetti

⬅️ Missed part 1? The first 20 styles (glitch, neon, synthwave, particles…) are here: 100 animations with Claude, part 1.

📅 A new part every day for 5 days. Part 3 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