Tejashmakwana/motionmaxxing

_{Your keyframes get a face rating: first the default (mid), then the measured version (maxxed). Typography and vector only, no photo of anyone, made with the skill's own runtime. Watch the MP4 · how it was made and checked}

motionmaxxing

Looksmaxxing for motion graphics.

An agent skill that turns AI slop videos into films that look made by a motion designer.

Follow @makwanatejas170 on X for the next glow-ups. Lives inside FinalMotion.

The glow-up  ·  Why your AI video is mid  ·  The science of the mog  ·  The protocol  ·  Mog check  ·  Install  ·  Start maxxing  ·  Toolbox

Your AI video is mid. Not broken, not ugly, just undecided: a label in the corner, a headline on the left, a card on a flat colour, a fade between every beat. motionmaxxing is an agent skill that makes launch films, product promos, brand stings and kinetic-type pieces, and makes them on purpose. Give it a website and it captures the brand, finds an idea only that brand could own, builds a world for it, and animates with timing measured frame by frame from 53 professional motion moments. Then it renders the film and looks at it with scripts, instead of telling you it came out well. It runs in Claude Code and in any agent that reads a SKILL.md folder. Everything renders locally from plain HTML.

Motionmaxx it, then check the numbers.

_{Early release. Still getting sharper, and more is coming soon.}

The rating scale

The skill's job is to move a film one notch right and to say honestly which notch it landed on.

Three before / after comparisons. In each, the same brand is filmed twice: once without the skill (mid) and once with it (maxxed). The brands belong to their owners and are used only to show the difference (see Ethics and credits).

Cluely, mid to maxxed. Same model, same brief: both films were generated with GPT-6.1. Left: without the skill. Right: with it. You don't need the most expensive model to get motion that looks designed. The difference is the skill, not the price tag. Watch the MP4 (30 s with sound, 1920x600).

The left film is a slide deck: a brand label top-left, a "REAL-TIME ASSISTANCE" tag top-right, a held left headline in two colours, two cards, and a "02 / 05" counter. The right film is the product: the real assist overlay on a lit desktop, the ⌘ + ↵ shortcut as physical keys, then the overlay sitting on a live call.

Spotify, mid to maxxed. Left: without the skill. Right: with it. The without arm is a left headline beside a phone mock-up in every frame. The with arm carries one idea (the green full stop becomes a switch, floods the frame, and becomes the icon) through type, a wall of lines that collapses, and a full-bleed ending. Watch the MP4 (15 s, 2560x720).

Wispr Flow, mid to maxxed. Top: without the skill. Bottom: with it. Watch the MP4 (24 s with sound, 1080x1440).

Most AI motion graphics fail in the same recognisable way: everything is a slide. A slop autopsy of rejected AI films ranked 25 default patterns. These are the loudest tells, and what catches each one.

Several of these were prescribed by earlier wording of the skill itself ("alternate flat grounds", "a recurring carrier"), so the fix was an edit to the skill, not a scolding for the agent. The lint is a lead, not a verdict: it cannot see text inside an image or a canvas.

Most "motion design skills" are a list of opinions. This one started with a measurement.

• 53 frame-accurate pro moments were decoded by 6 parallel AI analyst agents (reviewed by a human) into about 150 designer rules, each as WHEN / DO / BECAUSE with evidence.
• Every composition was seeked frame by frame. That gave about 4,300 distinct moves (4,288) and 12 measured eases.
• A slop autopsy of rejected AI films ranked 25 default patterns, and traced which ones the skill's own wording had caused.
• That was merged with judgment from earlier generations: the author's blind A/B rounds on an earlier generation of the skill (9 of 10 picks went to the with-skill film; one rater, so read it as a signal, not a benchmark), and a measured re-analysis of everything made so far.
• The result is checked by scripted gates and a page-chrome lint.

Looksmaxxing is mostly boring fundamentals done consistently. So is motion design. The translation, with the measured finding behind each:

• Jawline = the hard cut. Pros cut on motion. Scenes start already moving and clips end mid-move. A fade to black is a default, not a decision.
• Mewing for your frames = no dead frame. In the 3-7 s pro moments, something moves on about 99% of frames. Gate G2 fails a run of more than 3 flat frames.
• Skincare = grain and light. A ground is a surface, not a swatch: light, depth and texture on every frame. The hero moment gets the hardest work (real 3D, a generated plate, a dense composition).
• Posture = land decelerates, leave accelerates. The same object on the wrong curve reads as floaty or as thrown. That single rule is most of the difference between "animated" and "directed".
• Nothing grows from zero. Things arrive by decelerating from larger than life, or by moving in from the edge.

• Page chrome is the number one slop tell. A brand name in a corner, a "02 / SPEAK" counter, a timecode, corner brackets: in the autopsy these were the strongest signal that no one decided anything. The lint catches them by geometry and typography.
• A fix is often an edit to the skill. Several default tells had been prescribed by earlier wording ("alternate flat grounds", "a recurring carrier"). The skill was rewritten, not the agent scolded.

The full account, with the method and the caveats, is in docs/HOW-IT-WAS-BUILT.md.

Ten steps, the same order every time. The agent shows you the idea and the storyboard before it builds, then fixes in a fixed order when a gate fails.

flowchart TD
    A["0  Toolbox and taste<br/>providers.sh, verdicts, edits"] --> B["1  Know the brand<br/>brand.mjs, fetch_logo.mjs"]
    B --> C["2  One true thing and PAGE<br/>problem, audience, goal, emotion"]
    C --> D["3  Find the idea<br/>3 kinds, cover the logo"]
    D --> E["4  World and time<br/>STORYBOARD.md, buys, handoffs"]
    E -.-> F["5  Script and voice<br/>voice.py, sync.mjs"]
    E --> G["6  Hardest beat first<br/>runtime, stills, selfTest"]
    F -.-> G
    G --> H["7  Look honestly<br/>render, look.py, lint.mjs"]
    H -->|a gate fails, fix it| G
    H --> I["8  Sound to picture<br/>sfx, music, mix.py"]
    I --> J["9  Deliver<br/>final.mp4, index.html, NOTE.md"]

Dashed steps are optional: voice and sound need an ElevenLabs key, and some films are better silent.

A gate that fails is fixed, not argued. Scripts print the numbers and the agent quotes them in NOTE.md. Two gates have no script, and the agent has to say so.

Requirements: Node 22+, Python 3, ffmpeg, Google Chrome. Optional: an ElevenLabs key for voice, sound effects and music (ELEVENLABS_API_KEY); the Codex CLI with image generation for surface plates.

Claude Code

git clone https://github.com/Tejashmakwana/motionmaxxing ~/.claude/skills/motionmaxxing
bash ~/.claude/skills/motionmaxxing/install.sh        # checks the requirements; installs nothing system-wide

Or, from a checkout somewhere else: ./install.sh links it into ~/.claude/skills/motionmaxxing. Flags: --dir PATH for another skills folder, --copy to copy instead of symlink, --force to replace an existing install.

Other agents. The skill is a folder with a SKILL.md at its root. Point any agent that reads SKILL.md at the folder (or copy it into that agent's skills directory) and give it shell access. The scripts only need node, python3 and ffmpeg on the path.

Check your machine

bash scripts/providers.sh        # JSON: chrome, ffmpeg, key, codex, disk. Never installs anything.

In Claude Code, run /motionmaxxing or just ask in plain language. The skill triggers on any request to make, plan, storyboard, fix or critique a motion graphic.

1. From a URL

   /motionmaxxing make a 20s launch film for https://example.com. I want to see the idea and the storyboard before you build.

2. A single moment

   /motionmaxxing a 6 second kinetic-type sting for our brand: the one line "Ship it" with real 3D on the mark. Silent is fine.

3. Rate and repair a mid video

   /motionmaxxing here is draft.mp4 and its index.html. Rate it slop, mid or maxxed, run the gates, tell me what fails, and fix it.

What you get

Every script prints --help. Zero dependencies unless noted. Full flags in references/tools.md.

runtime/motion.js is one plain <script> on top of GSAP, with no build step. The API is in runtime/README.md.

• 12 measured eases by name (M.ease.softLand, snapSettle, accelExit, ...), also accepted anywhere an ease is.
• Seek-safe. Every frame is a pure function of time; jumping to any frame equals playing to it. Motion.selfTest proves it, including canvas pixels.
• Words, typing, cursor, press, count, camera, snap, dive, whip, smear, all authored in frames with measured defaults.
• hero3d. A Three.js hero object (a logo extruded from SVG, a coin, a glass slab, a phone) with real light and depth, on the same clock. Three.js is vendored; no CDN, no build.
• native-ui. True-proportion iOS furniture (phone, lock screen, notifications, tab bar) for when a product's real UI cannot be captured.

SKILL.md              the skill: laws, "never ship" list, gates, the 10-step process
references/          the craft, one topic per file (judgment, idea, world, motion, type, slop, tools, ...)
runtime/             motion.js, hero3d/, native-ui/, fonts, vendored GSAP and Three.js
scripts/             the toolbox above
templates/film.html  the starting film
examples/            demo, 3d-hero, phone, selftest (must print PASS)
library/             moments.jsonl: rule-only precedent rows
taste/               verdicts and edits: what was rejected and the before/after fixes
studies/             two calibration strips of invented brands, and where they come from
docs/                hero source, showcase media, HOW-IT-WAS-BUILT, KNOWN-LIMITS
install.sh           requirement check, then link or copy into a skills folder
LICENSE, NOTICE      Apache-2.0, and the bundled third-party components with their own licenses

Tejas Makwana

• X: @makwanatejas170
• GitHub: Tejashmakwana

This skill lives inside FinalMotion.

The full research and engineering story, with the method and the numbers, is in docs/HOW-IT-WAS-BUILT.md: the corpus, the six analysts, the frame-by-frame curves, the slop autopsy, the merge with earlier generations, and what each gate was born from.

• Learned from private study of published films. The films that were studied are not in this repo and are not redistributed. The skill ships principles in its own words and measured numbers. No third-party frame, clip or copy is included; the calibration strips in studies/ are original images of invented brands.
• Showcase brands. Cluely, Spotify and Wispr Flow belong to their owners. They appear only in the three before/after comparisons, to demonstrate the difference. These are unofficial demonstrations and are not affiliated with or endorsed by those companies.
• Generated images are for a missing surface only, never text, logos, UI or people shown as real, and are declared in NOTE.md.
• Third-party code and fonts are not covered by Apache-2.0 and keep their own licenses: GSAP 3.12.5 (GreenSock Standard License, which is not open source: you must comply with its terms), Three.js r186 (MIT), opentype.js (MIT), Inter (SIL OFL 1.1). See NOTICE; license files sit beside the vendored code.
• License: Apache-2.0, the same license HyperFrames uses. Use it, fork it, ship it commercially. Keep the NOTICE with your copy.

Early release, so a glow-up in progress. It works end to end on the author's machine and has been used on a handful of real briefs, but it has not had a wide test. Known limits, said plainly in docs/KNOWN-LIMITS.md: the lint cannot see text inside a canvas or an image; G1 and G4 are judged by eye; ElevenLabs music does not always hit tempo or length; WebGL renders run at about 7-11 fps; the sound-effect normaliser can corrupt very short clips; look.py treats show and hide events as cuts; and fetch_logo.mjs can return a header ribbon instead of the mark.

Open source under Apache-2.0. Bundled third-party components (GSAP, three.js, opentype.js, Inter) keep their own licenses: see NOTICE. Brand names in the showcase belong to their owners.