CASE STUDY / THE DESIGN SYSTEM LAYER

Same agents.
Better taste.

A 23-second product film built against the visual sameness of AI-generated motion.

MOTIONAGENT_DESIGN_SYSTEM_LAYER.MP400:23.659
THE BRIEF

Make the case for taste without making more AI slop.

Borrow the Codex film’s discipline: one idea per frame, real negative space, restrained motion, and a product metaphor that explains itself.

SYSTEM
SaaS Motion
FORMAT
16:9 · 30 FPS
VOICE
ElevenLabs
ACTUAL OUTPUT · FULL VIDEO
Read the direction
01

WHY IT’S BUILT THIS WAY

The restraint
is the argument.

The previous cut criticized AI slop while using the same visual habits it was attacking: too many palettes, type systems, cards, and decorative transitions.

This version keeps one typeface, black and white surfaces, one blue product accent, and one lime MotionAgent signal. Nothing competes with the idea.

The film never claims Claude or Codex are the problem. They execute. MotionAgent supplies the design context that makes their output recognizable.

02

SCENE BY SCENE

Six beats.
One clean argument.

Each scene removes information until only the product idea remains.

01
0:00–0:02.5ClaimLockup

State the old flex

Open on the exact claim viewers already recognize. No setup and no product pitch.

DIRECTOR INSTRUCTION

On charcoal, hold a small Claude lockup beside “Edited by Claude.” Keep the frame nearly empty and let the voice carry the weight.

SCENE PREVIEW
02
0:02.5–0:05.7EditorialTurn

Let the claim expire

A quiet white cut makes the reversal feel more confident than a loud verdict stamp.

DIRECTOR INSTRUCTION

Hard cut to white. Center “That used to be impressive.” and gradually mute only “used to be.”

SCENE PREVIEW
03
0:05.7–0:09.4RepeatedOutput

Show the sameness

Prove the problem visually: different outputs collapse into one template language.

DIRECTOR INSTRUCTION

Duplicate one restrained SaaS card four times. Keep every color, shape, and easing decision identical.

SCENE PREVIEW
04
0:09.4–0:14SystemThesis

Name the missing layer

Separate execution from taste in one clean sentence and one controlled accent.

DIRECTOR INSTRUCTION

Return to charcoal. Hold “The model can execute.” in gray, then introduce the MotionAgent mark beside “Taste needs a system.”

SCENE PREVIEW
05
0:14–0:20DesignSystemLayer

Make the product legible

Explain MotionAgent as context between the coding agent and the finished work—not another wrapper.

DIRECTOR INSTRUCTION

On white, connect Claude and Codex to MotionAgent. Attach typography, palette, and motion tokens, then resolve one distinct product frame.

SCENE PREVIEW
06
0:20–0:23.7OwnershipClose

Close on ownership

The agents stay visible, but the payoff belongs to the user’s visual language.

DIRECTOR INSTRUCTION

Bring Claude, Codex, and MotionAgent into one compact lockup. End on “Work that looks like you.” with one acid-lime accent.

SCENE PREVIEW

THE DIFFERENCE IS DIRECTION

Give your agent
a visual language.

MotionAgent gives Claude and Codex typography, palettes, motion grammar, and direction that compound instead of resetting every prompt.
Use the free starter See all examples