Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $199 onceUpgrade
Lookbk
Sign In
Lookbk picks

The best motion design skills for Claude Code (2026)

A motion design prompt describes the animation you want and hopes the model builds it the same way twice. A skill is a recipe the agent follows: a folder with a SKILL.md, a template that holds the design, and scripts that fill it in and check it. Each skill here makes one kind of motion, with your words and colors, and records a video of it.

See the 6 picks

Free skills to start. Pro is $99 a year for every skill, or $19 a month for 10. See pricing

Written for

Claude CodeCodexCursorGitHub CopilotGemini CLIOpenCode
and 25 more

The picks

From the Lookbk catalog only, and only skills whose main work is motion: moving type, a scripted cursor, a scroll-driven story, a poster that builds itself and a game-style promo. Each one is a skill your agent installs, so the look is fixed in the template and the same each run. Some end as a website hero, some as an MP4. Two of the six are free; the other four are Pro.

  1. Kinetic Title Drop: an example of what it makes
    Free
    video
    Kinetic Title DropClaude CodeCodexCursor+3 more agents

    01 · Motion Type · Free

    Kinetic Title Drop

    MP4 · 6 s · 1080p

    Free, and the quickest way to see a motion skill work. Three short lines become a six-second kinetic type film: a huge first word with a hairline slash, a second word that drops in as an outline and fills with color, and a payoff line that whips in with a motion smear.

    Worth knowing: It makes an MP4 only, not a web page, and it needs Node.js 22 or newer and FFmpeg.

    Needs: Node.js 22+ and FFmpeg

    See what Kinetic Title Drop makes
  2. Kinetic Type Grid Hero: an example of what it makes
    web
    Kinetic Type Grid HeroClaude CodeCodexCursor+3 more agents

    02 · Motion Heroes · Pro

    Kinetic Type Grid Hero

    Animated canvas hero · page + embed + 1080p video

    Moving type for a website. Your brand word is set one big letter per cell on a strict grid, and on every beat one move snaps through: tiles turn, rows slide and wrap, neighbors trade places. The poster inverts halfway, then every move is undone so the loop lands back on the word.

    Worth knowing: It reads best with a brand word of 3 to 8 letters, and the look is loud and flat by design.

    Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video

    See what Kinetic Type Grid Hero makes
  3. Bauhaus Timeline Hero: an example of what it makes
    web
    Bauhaus Timeline HeroClaude CodeCodexCursor+3 more agents

    03 · Motion Heroes · Pro

    Bauhaus Timeline Hero

    Animated hero section · page + embed + MP4

    A hero that shows how the motion is built. A watch dial assembles scene by scene while a timeline panel draws every tween and the playhead as it plays.

    Worth knowing: Pinned fonts include Outfit, Sora, Space Grotesk and Inter; any other Google Fonts family loads unpinned.

    Needs: Node.js 18+, Chrome, and ffmpeg for the video

    See what Bauhaus Timeline Hero makes
  4. Cursor Tour Hero: an example of what it makes
    web
    Cursor Tour HeroClaude CodeCodexCursor+3 more agents

    04 · Motion Heroes · Pro

    Cursor Tour Hero

    One HTML file + embed · 1080p MP4 and poster

    Motion that explains a product. A scripted cursor ticks off a checklist, flips a switch and presses the main button in a window built from your own workflow, while an event stream logs each step. You get a page, an embed and a 1080p video.

    Worth knowing: The window is a designed stand-in, not your real screenshots or a recording of your app.

    Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video

    See what Cursor Tour Hero makes
  5. Scroll Route Hero: an example of what it makes
    web
    Scroll Route HeroClaude CodeCodexCursor+3 more agents

    05 · Motion Heroes · Pro

    Scroll Route Hero

    One HTML page + embed · MP4 + poster

    Motion tied to scrolling. The hero pins, and a travel-poster route draws itself station by station as the visitor scrolls, with lamps that pop on and counters that run up. It also records a 1080p video of the same scroll story.

    Worth knowing: A route has at most nine stops.

    Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video

    See what Scroll Route Hero makes
  6. Pixel Quest Promo: an example of what it makes
    Free
    video
    Pixel Quest PromoClaude CodeCodexCursor+3 more agents

    06 · Retro Promos · Free

    Pixel Quest Promo

    MP4 · 20 s · 1080p · 120 BPM

    Free: a 20-second 8-bit promo that plays like a platform game. A pixel hero grabs coins and knocks a power-up out of a block for each of your features, and every hit lands on a 120 BPM grid.

    Worth knowing: No audio ships, only a cue sheet for adding chiptune. It makes a video only, and the length is fixed at 20 seconds.

    Needs: Node.js 22+, FFmpeg, and HyperFrames (runs through npx)

    See what Pixel Quest Promo makes

Install

Install a pick with your agent

Every pick is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Kinetic Title Drop, which is free; each skill page has its own prompt.

1. Paste the install prompt

Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.

Install the "Kinetic Title Drop" skill from Lookbk (https://lookbk.dev/skills/kinetic-title-drop).
1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add kinetic-title-drop
2. If it prints a sign-in link, show it to me. When I say I approved it, run the same command again.
3. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.

Or run it in a terminal

curl -fsSL https://lookbk.dev/cli.js | node - add kinetic-title-drop

2. Start a new session

Agents load skills when a session starts. The installer writes the folder where your agent looks:

Claude Code
~/.claude/skills/kinetic-title-drop
Codex
~/.agents/skills/kinetic-title-drop
Cursor
~/.agents/skills/kinetic-title-drop

3. Ask for the result

Describe it in plain words, for example:

Make a 6-second kinetic title drop that says "Ship / it / today." in our brand orange, 1080p, for an X post.

Another agent? Install a skill in any agent

FAQ

Questions

Still stuck? The guides cover installing, agents and licensing in more detail.

Read the guides
What is the difference between a motion design prompt and a skill?

A prompt is text you send each time, and the result depends on the model and the run. A skill is a folder the agent loads when your request matches its description, and it can carry scripts and templates that a prompt can’t. That is why the second run of a skill looks like the first.

How do I add one to Claude Code?

Paste the install prompt from the skill’s page into Claude Code, or run the install command in a terminal. It goes into ~/.claude/skills/<skill>. Type /skills to check that Claude Code sees it, then ask for what you want in plain words.

Do I need to write the animation myself?

No. You give the skill your words, colors and links, and your agent fills in the template. You change the content and the options each skill exposes; the motion itself is the skill’s design.

Do these also work in Codex or Cursor?

Yes, in agents that read SKILL.md and can run Node.js and Chrome on your machine. The guide to installing in any agent is linked below.

Read next

What are agent skills? Browse all skills