Motion Graphics for AI Agents: After Effects Skills

03:14 AM. Studio B. The AC smells like scorched dust and cheap oolong.

On my left monitor, an autonomous render worker is chewing through a batch of forty programmatic product bumpers. On my right monitor, I am watching the playback of its first output.

I feel physically ill.

It is a specific, visceral nausea that only bad computer animation can produce. An SVG card flies in from the left at a steady, immutable 120 pixels per second, hits the exact dead-center coordinate (960, 540), stops dead with zero deceleration, waits an arbitrary 1,000 milliseconds, and then scales down uniformly by 50% along a flat linear vector.

It moves like an automated warehouse gantry carrying a pallet of drywall. No weight. No friction. No life.

Left to their own devices, large language models generating motion scripts—whether they are emitting ExtendScript for After Effects, Remotion code, or GSAP manifests—treat time like an array index and space like a spreadsheet grid. They lack the biological instinct of inertia. They forget that things moving in the physical universe have mass, take time to build momentum, and overshoot their targets before snapping to rest.

If you let an unguided agent touch your render pipeline, it will produce output that screams "generated by a spreadsheet" from thirty paces away.

---

#The Sins of the Linear Default

When an autonomous agent writes a timeline, it solves for correctness rather than perception. It maps t=0 to t=1 with basic math.

I spent four years as a junior broadcast editor surviving on cold pizza and energy drinks, manually tweaking bezier handles in the Graph Editor until my eyes crossed. I know what happens when you skip that work. You get the uncanny valley of motion graphics.

Here is what agents produce when they write keyframes raw versus what happens when you constrain them with deliberate motion principles:

Visual Attribute	Raw Agent Output (Unskilled)	Autonomous Pipeline + Motion Skills
**Spatial Trajectory**	Strict linear vectors, right-angle turns	Curved arcs, deliberate overshoot, natural overshoot damping
**Temporal Easing**	Linear (`ease: "none"`) or generic symmetrical cubic	Asymmetrical easing (fast attack 15%, long exponential tail 85%)
**Hierarchy / Stagger**	All elements animate simultaneously on frame 0	Cascading staggers (2-4 frame offsets) dictated by visual priority
**Secondary Motion**	Completely absent	Reactive spring oscillations and inertial follow-through
**Spatial Cohesion**	Elements float independently without parent anchors	Strict spatial anchoring with unified velocity curves

A computer does not naturally understand that a human eye needs an entrance vector to lead the gaze. It just plots points. To fix this, you cannot simply prompt the model with "make it look slick and modern." That is corporate vapor. You have to feed it concrete mathematical models of motion physics, expression engines, and choreography primitives.

---

#Wiring Taste into the Graph Editor

To bring an autonomous pipeline to heel, we hooked our orchestrator directly into the motion-graphics-skills/after-effects-expressions skill from SkillDB.

Instead of letting the model hallucinate naive frame-by-frame values or flat interpolations, the skill forces the agent to compile kinetic logic using standard After Effects expression architecture. It applies decay constants, frequency math, and proper ease clamps.

Here is an extract from an agent execution step. The agent loads the skill, receives the layout requirements, and outputs a battle-tested ExtendScript payload implementing an overshoot dampening curve on the layer transform:

import { AgentRunner } from "@skilldb/core";
// Load our motion design skill definitions const runner = new AgentRunner({   skills: [     "motion-graphics-skills/after-effects-expressions",     "tailwind-design-system-skills/animation-motion"   ] });
async function generateLayerKinematics(targetLayer: string) {   const task =      Target Layer: "${targetLayer}"     Task: Animate layer scale from 0% to 100% with physical overshoot damping.     Constraints:     - Do not emit linear keyframes.     - Write an AE expression computing inertia based on velocity threshold.     - Clamp maximum overshoot to 108% of target scale.   ;
  const scriptSnippet = await runner.execute(task);   return scriptSnippet; }
// Resulting generated ExtendScript applied to the target layer's Scale property: / freq = 3.0; // Oscillations per second decay = 5.0; // Damping rate n = 0; if (numKeys > 0){   n = nearestKey(time).index;   if (key(n).time > time) n--; } if (n > 0){   t = time - key(n).time;   v = velocityAtTime(key(n).time - 0.001);   value + (v / 100)  (Math.sin(freq  t  2  Math.PI) / Math.exp(decay  t)); } else {   value; } */

Look at that expression. It’s an old classic, originally popularized by Dan Ebberts decades ago, but it remains the foundational baseline of procedural inertia. When an agent incorporates motion-graphics-skills/after-effects-expressions, it stops guessing what organic motion looks like and starts using mathematical formulas that model physical dynamics.

The transformation is instantaneous. The card does not just "appear" at (960, 540). It snaps into position with palpable momentum, compresses slightly against its own forward mass, and settles into place over five frames. The human brain accepts it immediately because it behaves like an object that exists in a room with air pressure and gravity.

---

#The Spiral: From 2D Curves to Deep Spatial Cohesion

Once you fix the easing curves, you realize that easing alone is just the surface.

You push deeper. You realize that a single card snapping into the frame is clean, but a UI with five cards moving simultaneously is a catastrophic wall of visual noise. The agent is firing everything at frame zero.

So you pull in principles from tailwind-design-system-skills/animation-motion to enforce spatial hierarchy and micro-timing tokens. Now the agent understands choreography: container first, header second (+3 frames), content cards staggered (+2 frames each), primary CTA delayed until kinetic rest.

Then you push deeper still. You realize flat vectors are dead. You want textured, organic frame-to-frame shifts. You tap into motion-graphics-skills/cel-animation-digital for frame-rate throttling—dropping intermediate render passes to 12fps (on twos) to give illustrative overlays a crunchy, tactile weight while the UI layer glides at 60fps underneath.

You see how this spirals? When you move beyond simple 2D motion and bridge into spatial 3D environments using 3d-animation-skills/blender-workflows, you suddenly have to care about camera focal length, lens breathing, depth of field, and light falloff.

Motion is not a property of an element. Motion is the relationship between the camera, the subject, and the passing of time.

If your agent does not know that relationship, it is just painting random pixels across a canvas.

---

#The Anchor

Here is the truth that every motion designer knows and every automated framework forgets:

Good motion is not decoration; it is spatial continuity that preserves the viewer's mental model across state changes.

When a UI element transitions cleanly, the user understands where it came from and where it went. When an agent cuts corners with flat, un-eased teleports, it shatters that model. The user has to pause, re-orient, and spend cognitive bandwidth figuring out what just happened.

Taste is not mystical. It is physics, rhythm, and discipline encoded into execution.

---

#Daybreak in the Pipeline

05:42 AM.

The city outside is waking up. The AC finally kicked off, leaving the room in a ringing, early-morning silence.

The batch render finished forty-two seconds ago. Forty video bumpers, generated entirely by an autonomous agent without a human touching a bezier handle or opening the timeline panel.

I hit spacebar on the final export.

The hero graphic accelerates smoothly along an asymmetrical ease, hits its mark, overshoots by exactly four pixels, snaps back on an exponential decay, and settles. The secondary typography cascades in two frames later. The cel-shaded highlight passes across the title at 12fps, crisp and tactile.

It looks like it was cut by an artist who cared.

If you are building autonomous media systems, stop letting your agents render raw vectors out of thin air. Equip your agents with the actual kinetic vocabulary of professional motion designers.

Browse all 6,168 skills across 448 packs in 38 categories at skilldb.dev/skills and stop shipping linear keyframes.