Free Claude skills

Motion graphics of your product, in your brand.

Create branded product animations with Claude. The kit covers timing, transitions, typography and export, with a shared brand file that keeps every piece consistent.

28 skills: 26 motion techniques, one brand setup skill, and one export skill.

Get the free Motion KitExplore the examples

What it makes

Every example was made by the skills

Each one was built from cold by a fresh Claude that saw only that skill and a brand file. Switch the brand file and the same skills make something that looks like a different product. The craft is in the skills: that a count lands slowly on its last digits, that progress stalls and jumps like real work, that a moving element keeps its shape instead of being swapped for another.

Calm and editorial. My own brand file.

Every name, number and message in these examples is sample data written for the demos, in my brand as well as the fictional one.

All 26 techniques are below. The kit is free.

Get the free Motion Kit

Pages and navigation

How one screen becomes the next. 4

Product moments

The interactions that prove a claim. 12

Data and systems

Numbers, tables and how it works. 4

Type and brand

Lines and marks that carry the brand. 3

Camera and story

Where the viewer should look. 3

Want this built around your product?

I design and build product motion for launches, websites and feature walkthroughs.

Tell me about your product →

Quick start

Make your first animation

  1. 01

    Install the kit

    Unzip the download, then copy the 28 skill folders inside product-motion/ into ~/.claude/skills/ (or .claude/skills/ inside one project). Each skill's SKILL.md should sit directly inside its own folder.

  2. 02

    Create your brand file

    Ask Claude to run motion-brand. It reads your code or site, writes brand.md, and shows you a test frame in light and dark.

  3. 03

    Pick a technique

    Start with button-to-done and your product's main action. Give it the real label, three short stages and the result.

  4. 04

    Review the stills

    Claude shows the key frames before anything moves. Approve them, or change them while it is still one line.

  5. 05

    Export

    The HTML file loops on your site as it is. For MP4 or GIF, ask for motion-export.

Start with

Button to done

It’s a small example that takes you through the whole workflow: brand, stills, animation, review and export.

Starter prompt
Use the motion-brand skill to set up our brand from this codebase. Then, using the button-to-done skill, make a motion graphic of our main action. Show me the still frames before you animate.

What you get

What is in the kit, and what it needs

In the download

  • 28 skills: 26 motion techniques, one brand setup skill, and one export skill.
  • A brand file template and two finished example brand files.
  • The export script, a README with install steps and starter prompts, and the license.
  • One zip, about 350 KB. Plain text and one script, nothing to run on install.

Tested

  • Claude Code, with Claude Opus. Every skill was built from cold in two brands, then fixed and built again.
  • Every example was checked frame by frame in Chrome, in light and dark.

Not tested yet

  • The Claude apps with uploaded skills. They should work, but I have not run the kit there.
  • Playback in Safari and Firefox.

Install

  • Claude Code: unzip the download, then copy the 28 skill folders inside product-motion/ into ~/.claude/skills/ for every project, or into .claude/skills/ inside one project. Each skill’s SKILL.md should sit directly inside its own folder, for example ~/.claude/skills/button-to-done/SKILL.md. Claude picks a skill up when your request matches it.
  • Claude apps:upload each skill folder as its own zip in the app’s skills settings. Export does not run there.

What it needs

  • Your own Claude plan with Claude Code, or skills enabled in the apps. The kit is free; there is nothing to buy from me.
  • Works straight away: standalone HTML animations, tested in Chrome, with light and dark themes. Each one freezes on any frame for review.
  • For MP4, GIF or WebM: Node 18 or newer, Playwright with Chromium, and ffmpeg. The export skill checks for them and tells you what is missing.

Use

  • Use the kit, and anything you make with it, in personal and client work. Please do not resell or republish the kit itself.
All 28 skills
  • Motion brand. Builds the brand file every skill reads, from your code, your live site or a short interview, and shows you a test frame before anything moves.
  • Container expand. A list row grows into the full detail page, its content handing over mid-flight.
  • Shared element. A thumbnail flies into the next page's hero while the pages change around it.
  • Shared axis steps. Screens slide along one axis as the stepper advances in sync.
  • Clip tabs. The active tab is revealed through a moving clip, so the label color changes at the pill's edge.
  • Button to done. The button is clicked, becomes its own progress bar, and resolves into done.
  • AI stream to structure. A question is typed, the answer streams in, and its facts lift out into a card.
  • Command palette. The palette drops in, a query types, the rows filter, and one command runs.
  • Empty to first. One click, and the first real items land exactly where the empty state was.
  • Drag to column. A card lifts, arcs across the board, and settles into the next column.
  • Toggle ripple. One toggle flips, and the change ripples through the preview away from it.
  • Cursor walkthrough. A cursor performs three steps inside the app and lands on the outcome.
  • Notification stack. Activity arrives one item at a time and pushes the stack down as one.
  • Checklist complete. The last two steps tick off, the ring closes, and setup is done.
  • Sheet drawer. A bottom sheet springs up while the page behind recedes, then settles back.
  • Toast undo. A row is archived, a toast counts down, Undo is clicked, and the row springs back.
  • Multiplayer cursors. Named cursors move, select, comment and drag on one canvas at the same time.
  • Count-up dashboard. A metric counts up while its sparkline draws in on the same curve, in pure CSS.
  • Chart morph. A line becomes bars, the standout is called out, and the bars morph to the new quarter.
  • System flow. Connectors draw in, packets travel, and each node lights up as work arrives.
  • Table sort. A header is clicked and every row glides to its new place at once.
  • Masked type. A headline rises through masks, a word fills with the accent, and the last word rolls.
  • Particle logo. Particles gather into the mark, resolve into the crisp logo, and scatter again.
  • Variable type. Letters swell and thin in a wave through the font's weight axis.
  • Before and after. A divider wipes across the old way and reveals the product doing it cleanly.
  • Focus pull. The camera pushes into one panel while the rest of the app dims.
  • Layer explode. The screen tilts isometric and separates into its labelled layers.
  • Motion export. Renders any piece to MP4, GIF, WebM, a poster and stills, frame by frame, so a slow machine makes the same video as a fast one.

Get the free Motion Kit

Get the free Motion Kit

28 skills for creating product motion in your brand: 26 motion techniques, one brand setup skill, and one export skill.

One email with the download link. No newsletter unless you tick the box.

More about how I build with Claude goes out in The Production Layer.