Motion Graphics

Build frame-exact motion graphics — animated logos, kinetic typography, brand videos, animated titles and social clips — as a single HTML file driven by a paused Web Animations timeline, then export them to MP4 in 1:1, 4:5 and 9:16. Use this whenever someone wants to animate a wordmark or logo, make a video from text, build a title sequence or lower third, produce a clip for LinkedIn / Instagram / Reels / TikTok, "turn this design into a video", animate a landing-page hero, or export a web animation to a video file — and also when an existing animation of this kind needs fixing, retiming, rest

10 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add acelera-agency/html-animation --skill motion-graphics

Manual install

git clone --depth 1 https://github.com/acelera-agency/html-animation.git /tmp/html-animation
mkdir -p ~/.claude/skills
cp -r /tmp/html-animation/. ~/.claude/skills/motion-graphics

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Motion graphics as code

Everything here is built the same way: **one HTML file, one paused timeline, deterministic export**. No video editor, no After Effects, no timeline GUI. The animation is code, so it is diffable, reviewable, re-renderable at any size, and — crucially — *measurable*.

That last word is the heart of this skill. Motion work invites eyeballing, and eyeballing lies. Nearly every real defect you will hit here is invisible to a glance and obvious to a measurement, and several things that *look* broken turn out to be the measuring script's fault. Build the habit early: when something looks wrong, get a number before you get an opinion.

## The shape of the thing

```
project/
├── video.html      # canvas, scenes, timeline — the whole animation
├── export.js       # frame-by-frame capture → MP4, all aspect ratios
└── verify.js       # whatever you need to assert about this piece
```

Copy `assets/starter.html` to begin. It is a complete, working animation with the engine already wired — type that enters, a recurring mark that highlights a word, and a scene that exits. Its palette and motif are placeholders; the structure is the point. Read it before writing anything; it is faster than assembling the pieces from the references.

Read the full skill on GitHub

Details

Skill name: motion-graphics
Repository: acelera-agency/html-animation
License: MIT
Repo updated: 12 August 2026

FAQ

What does the Motion Graphics skill do?

How do I install the Motion Graphics skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add acelera-agency/html-animation --skill motion-graphics. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Motion Graphics popular?

It lives in acelera-agency/html-animation, which has 10 GitHub stars and 1 forks.

Related skills

No Slop Design

agshinrajabov/no-slop-design

Senior product-design workflow for web and mobile UI that avoids generic "AI slop" and produces token-based, accessible, platform-correct design with a deliberate visual anchor. Use when asked to design, redesign, review, or "make it look better" for any screen, app, landing page, component, or design system; when building UI from scratch; when a design system or brand must be adopted or created; when generating design tokens, moodboards, or design specs; or when output must not look AI-generated. Runs discovery (market, audience, existing design system) → mini research → moodboard → tokens →

Frontend & Design

Liquid Glass Frontend

ngocanhnckh/liquid-glass-frontend-skill

Use when building a beautiful, distinctive, awwwards-tier web frontend — landing pages, dashboards, web apps, marketing sites — that needs Apple-style liquid-glass surfaces, choreographed motion.dev animations, and creative editorial layouts instead of the generic SaaS look (icon-card rows, centered heroes, default fonts, uniform fade-ins). Covers creative direction and signature interactions, the frost/blur glass material, single-source color tokens with dark+light theming, scroll/stagger/parallax/scroll-scrubbed animation, type-as-hero typography, and asymmetric grid-breaking composition.

Frontend & Design

Premium Web Design

Lucxar/premium-web-design-skill

Transform any website into a premium, Apple-quality web experience. Use when building new websites, redesigning existing ones, reviewing web design quality, implementing landing pages, or when the user mentions "premium", "luxury", "high-end", "Apple-like", or "professional" website design. Also activate when creating hero sections, improving visual hierarchy, adding animations, or optimizing web aesthetics.

Frontend & Design

Character Animation

karem505/character-animation-skill

Turn a static character or asset image into a looping animated character, delivered as a moving SVG plus animated WebP and GIF. Use this whenever the user wants to animate, bring to life, or "make move" a character, mascot, logo, creature, sprite, icon, or any asset image — or wants a moving/animated SVG, WebP, or GIF made from an image — or mentions generating a sprite sheet animation, or names "Nano Banana 2" / Gemini image generation for animation. Also use it to convert an EXISTING sprite sheet (a grid of frames) into those animated formats. Trigger even when the user just says things like

Frontend & Design

Senior Designer

sshahzaiib/senior-designer-skill

Act as an evidence-based senior product designer for any UI/app design or build task. Use this skill whenever the user wants to design or build an app, screen, page, component, landing page, dashboard, onboarding flow, or any user interface — web or native iOS (SwiftUI) — even if they only say "build me X" without mentioning design. Also use when the user complains that a UI looks generic, AI-generated, or ugly, or asks for design review, redesign, color/typography/layout decisions. Every rule inside is sourced from 158 vetted design publications (Apple HIG, WCAG, NN/g research, Bringhurst, No

Frontend & Design

Bufatechno Webgamedev

bufatechno/bufatechno-webgamedev

BUFATECHNO WEB GAME DEV — skill for building complete, production-ready web games with Three.js (WebGPU/TSL) or Babylon.js (WebGPU/Havok). Optimized for ZCode and Claude. Covers scaffolding, ECS, PBR/IBL, WebGPU/TSL, VFX/particles/post-processing, Web Audio, assets (GLTF/Draco/KTX2/Splat), 2D canvas/sprites, and animation (mixer/skeletal/morph/blending). Use when user asks to create, build or ship any 3D browser game — FPS, voxel, third-person, platformer, racing, flight, tower defense, RPG, multiplayer, WebXR/VR. Triggers on 'Three.js game', 'Babylon.js demo', 'WebGPU game', 'voxel world', 'b

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.