Make motion graphics with Claude Code, without manually animating them in After Effects.
If you came here from the Reel, this is the full workflow + prompt.
The animation you saw was created with Claude Code in roughly 20 minutes, using less than 3% of my credits.
No gatekeeping. Here’s everything.
You’ll need:
You don’t need to manually write the animation code.
Claude Code handles the build based on the prompt.
Copy this into Claude Code:
Create an 8-second vertical 9:16 motion-design animation for Instagram Reels.
1080 × 1920.
60fps.
120 BPM.
16 beats / 4 bars.
Exactly 8 seconds.
CORE IDEA
One shape. Never cut.
Every interface, card, editor, timeline, command field and title is the SAME continuous object transforming into the next state.
The animation tells this story:
THIS VIDEO
→
0 CODE
→
0 AFTER EFFECTS
→
0 EDITORS
→
0 MOTION DESIGNERS
→
make it move
→
JUST A PROMPT
→
MADE ON
→
OPUS 5.5
→
@VIZNFR
The entire sequence should feel like one continuous piece of premium motion design rather than separate scenes.
VISUAL STYLE
Smooth, minimal, premium UI motion.
Background:
warm off-white #ECEAE6
Primary UI:
near-black #0E0E0D
Secondary dark surfaces:
#1E1E1C
#2C2C29
Primary light text:
#FAFAF8
Muted text:
#8A8883
Accent:
signal orange #FF5B1F
Typography:
Geist
Geist Mono for code / command-line elements.
No gradients.
No glow.
No particles.
No excessive bounce.
No generic template transitions.
No unnecessary decoration.
Use strong typography and large compositions designed specifically for a vertical phone screen.
Keep important elements inside Instagram Reel safe areas.
MOTION LANGUAGE
One continuous transforming object.
Never hard-cut between states.
The object's:
- width
- height
- radius
- internal layout
- content
- position
can transform continuously.
Use controlled closed-form spring motion.
Maximum overshoot approximately 2%.
Avoid exaggerated bouncy easing.
Text swaps should have their own entrance and exit timing.
Use short directional motion blur when typography changes.
A cursor should physically drive interactions wherever appropriate:
- clicking
- selecting
- dragging
- typing
- pressing Enter
The cursor should feel connected to the animation rather than decorative.
Camera scale can change between states so every important state fills the vertical frame.
Do not leave large amounts of dead space.
STORYBOARD
BEAT 1
Begin immediately.
A compact near-black pill/card exists on the warm off-white canvas.
Large text:
THIS VIDEO
Cursor approaches.
The composition should instantly establish the visual language.
BEAT 2
Cursor clicks.
The same object stretches and transforms into a compact code-editor interface.
Brief believable code structure appears inside.
Do not show excessive readable code.
This is primarily a visual transition.
BEATS 3–4
The code interface compresses and transforms.
Huge typography resolves:
0
CODE
Make the "0" visually dominant.
Hold long enough to read clearly.
The cursor continues moving naturally toward the next interaction.
BEATS 5–6
The same object transforms into a recognizable motion-design interface.
Use visual cues such as:
- composition viewport
- small layer structure
- keyframe-like controls
Do NOT copy any real software interface exactly.
The interface then collapses/transforms into:
0
AFTER EFFECTS
Large, bold and instantly readable.
BEATS 7–8
The object stretches horizontally into a video-editing timeline.
Use recognizable abstract editing-language:
- tracks
- clips
- playhead
The cursor quickly interacts with the timeline.
The timeline compresses and transforms into:
0
EDITORS
Keep typography large.
BEATS 9–10
The same container transforms into a motion-curve / graph editor.
Show smooth animation curves and control points.
The cursor briefly manipulates one of the curves.
The graph then transforms into:
0
MOTION DESIGNERS
"MOTION DESIGNERS" must remain readable on a phone.
Do not cram the typography.
Use two lines if necessary.
BEAT 11
The object compresses into a command-input field.
Cursor clicks inside.
Type:
make it move
Use Geist Mono.
Show a visible blinking caret.
Typing should feel quick and tactile.
BEAT 12
Hold:
make it move█
briefly.
Then the cursor / keyboard interaction presses Enter.
The command field responds physically.
Show a minimal check / confirmation state.
The response should feel satisfying but restrained.
No confetti or celebration effects.
BEAT 13
The command field expands dramatically.
Large typography resolves:
JUST A
PROMPT
This should feel like the reveal explaining everything the viewer just saw.
Keep it extremely readable.
BEAT 14
The same geometry transforms again.
First reveal:
MADE ON
Then rapidly transform/emphasize:
OPUS 5.5
OPUS 5.5 should become the dominant element.
Use the orange accent strategically during the transformation.
Do not make the entire screen orange.
BEAT 15
OPUS 5.5 transforms into the final creator credit:
@VIZNFR
Make @VIZNFR large and dominant.
This is the final branding payoff.
Give it enough visual stability to actually register.
Do not make it a tiny footer.
BEAT 16
Collapse the final @VIZNFR composition back toward the geometry/state used at the beginning.
The motion should complete cleanly on the musical downbeat.
If creating a looping version, make the final frame mathematically identical to the first frame.
Cursor position and cursor velocity must also match the beginning so the loop does not stutter.
TIMING
120 BPM.
16 beats = exactly 8 seconds.
Something meaningful happens on every beat.
Do not allow dead time.
However, readability is more important than cramming extra animation into every moment.
The important text states must have enough screen time to register:
0 CODE
0 AFTER EFFECTS
0 EDITORS
0 MOTION DESIGNERS
JUST A PROMPT
OPUS 5.5
@VIZNFR
The command interaction receives TWO beats because typing and confirmation need to remain readable.
TECHNICAL BUILD
Build the animation deterministically.
All animation state must be derived from time inside:
seek(t)
No CSS transitions.
No timers.
No accumulated frame state.
Seeking directly to any timestamp must produce the correct frame.
Use closed-form spring step responses.
If a property changes target multiple times, calculate it as the sum of spring responses so the animation remains a pure function of time.
Cursor interactions must also be deterministic.
For dragging interactions, calculate the controlled value directly from cursor position while held.
On release, transition back into spring-driven motion.
TEXT
Text inside transforming containers needs independent entrance and exit timing.
Do not allow old and new labels to overlap.
Avoid blurry text caused by scaling.
Do not apply will-change to elements being heavily camera-scaled if it causes text rasterization problems.
MOTION BLUR
Render at 60fps.
Use temporal supersampling.
Target approximately a 180-degree shutter feel.
For example:
render 4 temporal subframes per final frame and blend them for natural motion blur.
Motion blur should improve fast transformations without making typography unreadable.
CAMERA
The camera should subtly reframe and scale so each important state occupies a meaningful amount of the 9:16 canvas.
Do not simply leave one small object floating in the center for eight seconds.
Camera movement must feel motivated by the transforming object.
No aggressive cinematic camera movement.
No fake depth-of-field.
QUALITY CONTROL
Before rendering the final video:
Render a representative frame from every beat.
Create a contact sheet showing all 16 beats.
Check for:
- text collisions
- unreadable typography
- bad line breaks
- inconsistent margins
- cramped UI
- cursor collisions
- elements outside safe areas
- inconsistent icon strokes
- excessive spring overshoot
- blurry text
- dead frames
Fix those problems before the full render.
IMPORTANT
This should NOT look like a slideshow of different UI screens.
The core visual trick is that everything feels physically related.
THIS VIDEO becomes the editor.
The editor becomes 0 CODE.
That geometry becomes the motion interface.
The motion interface becomes 0 AFTER EFFECTS.
That becomes the timeline.
The timeline becomes 0 EDITORS.
That becomes the graph editor.
The graph becomes 0 MOTION DESIGNERS.
That becomes the command field.
The command becomes JUST A PROMPT.
That becomes OPUS 5.5.
That becomes @VIZNFR.
One object.
One continuous visual system.
No cuts.
START
Before writing any code:
1. Show me the complete 16-beat storyboard.
2. Explain what the continuous object becomes on every beat.
3. Explain the cursor action on every beat.
4. Flag any readability or timing problems you anticipate.
5. Wait for my approval before implementing the animation.