Charlie Hills
← Motion graphics in code

Claude skill · Motion graphics pack

Motion Effects

/motion-effects

Build any of 16 premium motion effects from scratch in your own brand, as one 8-second looping HTML file with window.seek(seconds) so it exports frame-exact to MP4 or GIF. Interfaces (button to player, search to results, card to workspace, tabs to panels), data (chart morph, dashboard zoom, spring stack, magnetic dock), type (masked type, elastic type, text to layout, image reveal) and systems (perspective shift, glass focus, flowing paths, particle logo).

Needs Brand Intake installed tooRuns in Claude Code

Free. Built and used by me, Charlie Hills.

Install it in two minutes

The same zip works in the Claude app and in Claude Code.

In the Claude app

  1. Download the zip. Keep it zipped.
  2. Open Settings → Capabilities and turn on Code execution and file creation.
  3. Go to Customize → Skills, press +, then Create skill → Upload a skill, and pick the zip.
  4. Type /motion-effects in any chat, or just ask for the job. Claude reaches for it on its own.

In Claude Code

  1. Download the zip to your Downloads folder.
  2. Run this in your terminal:
  1. Start a new session and type /motion-effects.

More on this shelf

Brand Intake

The setup step for the motion pack. A short interview and 3 to 5 reference frames become your brand files.

Animated Chart

Make a looping animated chart for LinkedIn or a newsletter in code with Claude Code. Bars that become a line, a number that counts up, a before and after.

Apple Launch Film

Rebuild an Apple-style Mac launch film entirely in code with Claude Code.

Launch Video

Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day.

Loop Cover

Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps.

Milestone Reveal

Make a 12-second looping milestone clip in code with Claude Code.

See all 104 skills →