How to Make AI Motion Graphics: Commercial-Quality Ads Without After Effects

Case Studies: What Changed and Why

Training Season motion video

Make a 25-second vertical lyric motion film to "Training Season".
1080×1920, 30fps. Three.js + postprocessing, GSAP for 2D overlays.

AUDIO
Use the 25s audio from this reel exactly as is — do not cut or splice it:
https://www.instagram.com/reel/DczJLScIIuV/
First pull the full lyrics of this clip, build a beat grid, and time every sung word.

MOTION REFERENCE
https://www.instagram.com/reel/DerrAaVIxjl/
Borrow its skeleton: the camera never stops, lyrics wrap a rotating ring,
key words slam full-width on the beat, whip-pan transitions.
Its motion is great but its taste isn't — don't copy the single pink,
the repeated tunnel or the mixed fonts.

STORY
A woman writes the love she wants onto a manifestation board at night.
It's her standard, not a plea. On "training season's over" she stops
waiting: every wish gets a red check, and it's morning.
Feminist, hopeful — "there's still tomorrow". No man in frame.
Arc: quiet night → writing the list → one fragile moment → overload → declaration → morning.

LOOK
Collage / print: magazine cut-out letters, vision board, newspaper front page.
Cream / pink / silver with warm film grain; red only as accent. Max 2 fonts.
No real person's face — use silhouettes and objects.

MOTION RULES
- 11 key words are extruded 3D type that lands at 85–100% of screen width,
  sharp and readable for at least 0.3s.
- Every other lyric word appears when it's sung, at least 90px tall.
- Max 3 layers per frame, one hero at a time.
- Depth comes from an environment fixed in space (grid room, orbit rings,
  tick marks), not from floating decoration.
- Transitions: whip pan + blur, a single white frame, or flying through an object.
- Sub-frame motion blur on every fast move. Don't let bloom make it hazy.
- Visual peak on the first beat of the chorus.

ENDING
On "over": "manifested ✓", six red checks tick in one by one,
then "made with OD Motion".

Show me 3–5 key stills first. Don't animate until I approve.

IKEA motion video

Make an 11-second product launch film for IKEA's new PS 2026 collection.
Unofficial concept. 1920×1080, 60fps, HTML + GSAP.

REFERENCE
Copy the pacing of this reel shot by shot, but NOT its story:
https://www.instagram.com/reel/DcVTS2exsRR/
(line-art product cards push in one by one → form a grid → collapse into one canvas → logo)

BRAND (must read as IKEA in the first second)
- Colors: IKEA blue #0058A3, yellow #FFDB00, white, dark grey #3C3C3C
- Visual language: IKEA assembly-manual line drawings (isometric, thin black stroke)
- Font: clean geometric sans, bold for prices

ASSETS (attached)
- 5 product photos on white + prices:
  Stool $69.99 · Folding Chair $59.00 · Side Table $39.99 · Chair Bed $399.00 · Nightstand $69.99
- 3 official dimension drawings (use them to draw the line art)
- IKEA logo (SVG)
- Copy: "MAKE ROOM FOR PLAY" / "Playful functionality since 1995."
- Card keywords: Playful / Flexible / Affordable

SHOTS
0.0–2.5s  Product cards slide in on a conveyor; each push lands on a beat
          (0.55 / 0.775 / 1.0 / 1.175s). Each card = line drawing + name + price.
          The stool drops in tilted and rights itself.
          Price tags drop in and pin with a small rubber-band wobble.
          The line drawing sits on a deeper layer than its card (parallax).
          Top row lifts to half height, Chair Bed rises from below.
          Hold 0.3s while the drawings float.
2.5–6.0s  Cards settle into a room plan. The Chair Bed card unwraps into its
          silhouette and lands on the band. The real product line-up wipes in
          from the center outward. Price tags pin onto the real products,
          left to right. "MAKE ROOM FOR PLAY" reveals line by line.
6.0–8.0s  Logo: I-K-E-A letters slam in one by one, wipe to IKEA blue, push in.
End card  "Unofficial concept · not affiliated with IKEA"

MOTION RULES
- No white flashes, no hard cuts. Every transition is a continuous push or wipe.
- Elements overlap and follow each other; nothing pops in alone.
- Motion blur on fast moves.

SOUND
Lock the music first, then put every key move on a beat.
A soft whoosh under every move, a small "pin" on each price tag.
Mix to -16 LUFS, no harsh highs.

Show me 3–5 key frames first. Don't render the full film until I approve.

poppi motion video

Make an 11-second brand film for poppi, the prebiotic soda.
Unofficial concept. 1920×1080, 60fps, HTML + GSAP.

REFERENCE
Copy the pacing of this reel shot by shot, but use poppi's own world:
https://www.instagram.com/reel/DbqR1UxhTvE/

BRAND (must read as poppi in the first second)
- Every cut is one poppi flavor color. Magenta #EC008C, yellow #FFF200,
  blue #0667BE, orange #F15506, pink #FF8CCB, red #D4002E
- poppi wordmark (SVG, attached)
- Copy (from drinkpoppi.com): "Soda's back, but better" / "THE PREBIOTIC SODA"
- Personality words: FIZZY / BOLD / FRUITY / BUBBLY / FUN

ASSETS (attached)
- poppi wordmark SVG
- Can renders: Strawberry Lemon, Orange Cream, Shirley Temple, Cream Soda,
  Ginger Lime, Sour Apple, Alpine Blast, Doc Pop
- 3 lifestyle photos

SHOTS
0.00–1.85  9 hard cuts on the beat. Each cut = a starburst in one flavor color
           (punch zoom 1.18 → 1.03) + its fruit popping in (1.3 → 1).
           Kicks at 0.285 / 0.785s pump the whole frame.
           Nested starbursts: outer rotates slowly, inner counter-rotates and grows.
1.85       Wordmark pops with squash & stretch, purple → magenta, starburst burst.
2.73       Photo window masks up from the bottom and rounds into a card;
           "Soda's back, but better" presses down from above; bubbles rise.
3.65       Photo left, giant strawberry right, "NEW" sticker slaps on.
4.56       One giant orange drops onto two others, all three sink.
5.56       Personality words scroll vertically with motion blur; the middle row is bright yellow.
6.60       A can slams down on its side, soda puddle spreads, "THE PREBIOTIC SODA" fills the width.
≈7.5       Cans spin in (Sour Apple → Orange Cream), each lands with an impact ring.
≈8.3       Photo cards slide right to left.
≈9.2       Full-frame photo, a quick blink.
≈9.8–11    End card: a can hops in (Pixar-style), pops open, a bubble rises and
           becomes the dot on the "i" in the wordmark.
End card   "Unofficial concept · not affiliated with poppi"

SOUND
Lock the music first and do not cut it. Every hard cut lands on a beat.
The hero sound is a real can-opening "tss". Mix to -16 LUFS.

Show me 3–5 key frames first. Don't render the full film until I approve.

Duolingo motion video

Make a 21-second launch film for Duolingo's new feature, Image Flashcards
(launched Oct 19, 2026: after a lesson you see a picture, no choices,
and say the word out loud; missed cards come back).
Unofficial concept. 1920×1080, 60fps, HTML + GSAP.

REFERENCE (motion only — NOT the story)
https://www.instagram.com/reel/DafsqUut4x1/
Borrow: UI on a scene, big words appearing word by word, a camera that never cuts.
The story must come from Duolingo's feature, not from this reel.

BRAND (must read as Duolingo in the first second)
- Duo on screen in second one
- Green #58CC02, blue #1CB0F6, red #FF4B4B, dark grey #3C3C3C
- Chunky 3D buttons; rounded type (Nunito)
- Use official Duolingo Lottie animations where possible (attached)

SCRIPT (natural female voiceover)
1. "Easy."  (over the familiar tap-the-tiles lesson)
2. "Remembering it? … Not so much."
3. "So we took the choices away."
4. "Meet Image Flashcards."
5. "A picture… and your voice."
6. "Miss one? It comes back."  → end on the Duolingo app icon + name

SHOTS
0.0–5.9   Phone lesson: fingers tap tiles; Duo leaps out of the phone on "Easy."
5.9–8.0   Tiles fall away; zoom through into a blank card.
8.0       "Meet Image Flashcards" — official burst.
10.2      A picture appears, mic turns on, the learner says the word.
14.2      Correct!
14.9      A missed card swings back in: "Miss one? It comes back."
17.3–21   App icon wakes up and bursts on "Duolingo".
End card  "Unofficial concept · not affiliated with Duolingo"

SIGNATURE MOVE
A giant Duolingo 3D button press that floods into the next scene. Use it for every transition.

MOTION RULES
No white flashes, no hard cuts. Continuous camera with parallax depth. Motion blur on fast moves.

SOUND
Record / generate the voiceover first, then cut the picture to each line.
Every action has its own sound: tap, pop, card swipe, mic on, correct, fail, burst.
Music under the voice. Mix to -14 LUFS.

Show me 3–5 key frames first. Don't render the full film until I approve.

IKEA motion video

Play A, then B, with the same device volume. A contains music. B adds an effect layer describing individual actions, including whooshes whose peaks meet the fastest movement. The point is to hear what the effects contribute without changing the picture.

100K & OpenDesign Logo motion video

The 100K narrative film followed a HyperFrames launch-film reference, using tweet UI, real curves, and motion-graphics blocks for posts, charts, and counters. Its music went through 15 versions before the track’s own climax aligned with the picture. The notes credit Pixabay for the music source.

Start with a reference. Break it down beat by beat. Choose one signature motion. Approve still frames before rendering. Lock the sound before timing the picture.

A motion brief such as “make this more energetic” leaves too much undecided. What moves? Where does the eye go? Which word lands on the beat? What should the viewer recognize in the first second?

The workflow below turns those questions into reviewable decisions. It works for a product launch, a furniture concept ad, a kinetic typography film, or a short brand story. You will finish with a brief, a timed shot list, approved keyframes, an editable motion project, and a checked video export.

What You Need Before You Start

Bring one clear message, a target audience, a delivery format, and the assets that make the work recognizable: a logo, product UI, product photographs, or a small set of approved images. Choose music or narration you can use for the intended delivery. A reference is a study input; permission to view a reference does not grant permission to republish its footage or soundtrack.

You also need a way to generate or prepare assets, a motion renderer, and a reviewer who can approve visual direction. In these projects, Claude handled direction and briefs, Codex handled asset generation and implementation, and repetitive brand adaptations could be delegated separately. These are production roles rather than mandatory model subscriptions.

Step 1: Choose a Reference for Its Structure

Start with the kind of communication you need, then choose a reference. A furniture ad and a software launch may both have beautiful transitions, but they solve different problems.

Choose from four motion formats:

Save the original link, creator credit, collection date, and a sentence explaining what you want to learn. If you record likes or comments, keep the observation date: those numbers change and do not explain why a film works.

Useful starting references from the notes include Ramp by @studio.ojas, MUJI by @vanshika.motion, Henki by @bymyno_, and Visual Test 01 by @jordans.archivess. Open the original posts to study the creators’ work.

Checkpoint: you can explain why the reference fits your message and identify the specific technique you intend to study.

Step 2: Break the Reference Down Beat by Beat

Watch once for the whole story, once without sound, and once while concentrating on the soundtrack. These passes separate visual structure from audio energy. Then make a contact sheet so that you can see the film’s progression without scrubbing repeatedly.

If you have a permitted local copy, FFmpeg can create a rough contact sheet:

ffmpeg -i reference.mp4 -vf "fps=1,scale=240:-1,tile=5x4" -frames:v 1 reference-contact-sheet.jpg

This example samples the first 20 seconds at one frame per second. For longer films, create additional sheets. Fast transitions need closer inspection around their actual timing; a contact sheet cannot tell you whether a movement feels right.

Record four things for each beat:

1. Purpose: what does the viewer learn or feel here?
2. Composition: what is foreground, background, and the main point of attention?
3. Motion: what enters, moves, changes, or leaves? Which movement repeats?
4. Sound: is the event driven by a musical accent, a spoken word, or an effect?

A useful distinction is between a visual trick and the need it serves. A wall of sticky notes may communicate overload; the important lesson is how the film makes that overload tangible. Your own product may need a different metaphor.

Analyze this reference as a motion designer.
For each beat, describe the communication goal, composition,
entry/hold/exit motion, and sound event.
Identify the single recurring motion that gives the film its identity.
Separate reusable motion principles from the creator's story,
brand assets, and distinctive artwork.
Do not invent timestamps you cannot observe. Mark unknowns.

Checkpoint: you have a timed breakdown and can explain how the signature motion supports the story.

Step 3: Write an Original Brief and Shot List

Borrow a motion principle, then rebuild the story around your own subject. In the Duolingo case, an early version borrowed the VoiceOS story as well as its animation language. The result did not make sense for the new product. A later opening spent too long in skies and forests, making the brand hard to recognize. The correction brought Duo, brand green, and a dimensional button into the opening second.

For a brand film, first-second recognition serves as a practical direction rule. It is not a requirement for every narrative film, but it is a useful check when the purpose is immediate product recognition.

Write down what to take from the reference and what to leave behind. Lock typography, palette, image treatment, a recurring movement, and the emotional progression before asking for a full render.

Create a motion brief for [product or subject].
Audience: [who will watch].
One message: [what they should remember].
Delivery: [duration, aspect ratio, resolution, frame rate].
Brand assets: [approved files].
Reference: [link or permitted local file].
Borrow: [specific motion principle].
Do not borrow: the reference's story, wording, artwork, or identity.

Define visual rules, the emotional arc, one signature motion,
and a shot list. Give every shot a communication purpose,
start/end timing, visible elements, motion, and a sound cue.
State missing inputs before implementation.
Stop after the brief and keyframe plan; do not render yet.

For example, a short furniture concept might introduce a product, show several items forming a room, then hold a final brand composition. Its signature can be the way each object snaps into a shared grid. Keep the opening, development, and ending legible even if a viewer misses a transition.

Checkpoint: another person can follow the film from the shot list without seeing the reference.

Step 4: Lock the Sound Before Timing the Picture

Choose whether the film is music-led or narration-led. For a music-led film, listen for phrases, downbeats, transitions, and a usable ending. For narration, approve the wording and record a working voice track before setting shot durations.

Do not rely on BPM alone. A beat grid tells you where pulses repeat; it does not identify a word’s onset, a pause, or the emotional peak of a song. In the Training Season case, the notes record a tempo of 122.75 BPM, but the typography also needed word-level timing.

Make a small cue sheet with time, event, visual response, and effect. Add sound effects only where they describe an action. For a whoosh, align the strongest part of the sound with the fastest part of the movement rather than simply starting both clips together.

Using the approved audio, create a cue sheet.
Mark phrase boundaries, strong accents, spoken-word onsets,
and a natural ending. Distinguish measured events from estimates.
Map each approved shot to those cues.
Suggest a restrained sound-effect layer for meaningful movements.
Do not replace or splice the soundtrack without approval.

Two lessons came from rejected edits. In Training Season, joining music from different sources changed the timbre. In the 100K narrative film, the music worked only when its own climax met the visual climax and its musical progression was preserved. Recutting the picture can be a better solution than cutting the music into a different shape.

Checkpoint: the soundtrack has a deliberate beginning and ending, and every major visual beat has an audio reason.

Step 5: Generate Assets and Approve Keyframes

Prepare three to five representative still frames before animation. Include the opening, a busy middle frame, the peak, and the final hold. If a special scene carries the whole idea, add it even if that takes you beyond five frames; Training Season used eight stills.

Use consistent image generation instructions for lighting, camera angle, material, and background. For commerce films, check cutout edges and contact shadows. For interface films, verify text and product details. A renderer cannot fix an inaccurate screen or a product photograph that belongs to a different visual system.

Prepare keyframes from the approved brief and shot list.
Use the actual brand assets, final copy, and intended aspect ratio.
Show the opening, densest frame, emotional peak, and final hold.
For each frame, explain its purpose and planned movement.
Check text readability, asset consistency, crop, and brand recognition.
Do not animate the full film until these frames are approved.

Review the frames at their intended display size, including on a phone. Do not judge a vertical composition only as a large desktop image. Ask whether the text is readable, the hierarchy is obvious, and the recurring visual idea survives across frames.

Checkpoint: a reviewer has approved the actual composition and assets, not merely a mood board.

Step 6: Animate with the Simplest Suitable Renderer

Use 2D when the visual problem is typography, cards, cutout products, interface elements, or grid-based composition. The production workflow used HyperFrames with GSAP for the IKEA, poppi, and Duolingo cases.

Use 3D when depth, perspective, camera movement, or spatial relationships are part of the idea. Training Season moved from HyperFrames to Three.js during iteration. Its later pipeline used postprocessing for depth of field, glow, and chromatic effects, plus subframe motion blur. Those techniques are options for a particular look, not ingredients every film needs.

Define entry, hold, and exit for each shot. Make the signature motion recur with variation, and reserve stillness for moments that need reading or emphasis. The cited projects were rendered at 60 fps; choose your own frame rate in the brief and keep it consistent through rendering and export.

Implement the approved motion project.
Follow the approved keyframes and cue sheet.
Keep the one signature motion consistent across shots.
Make timing deterministic so that a requested timestamp can be
rendered repeatedly. Keep assets local and paths explicit.
Render a short representative segment before the full film.
Deliver editable source, asset dependencies, and export settings.
Do not add unapproved effects or change the soundtrack.

The representative segment should include a difficult transition or the densest frame. Watch it with audio before rendering the whole film. Check that text stays readable during movement, that depth does not hide information, and that the renderer reproduces the approved stills.

Checkpoint: the hardest segment works in motion and the full render is reproducible.

Step 7: Review the Export, Then Compare Versions

Watch the actual exported file from beginning to end with sound. Then inspect it muted and inspect selected frames. Each pass catches different defects: awkward rhythm, weak visual storytelling, and local rendering problems.

Use a focused revision instruction. Instead of “make it better,” identify a timestamp, the observed problem, and the result you want. A side-by-side comparison should use aligned timing and the same playback conditions; otherwise, a louder soundtrack or a shifted cut can make comparison misleading.

Review the exported film against the approved brief.
Check the opening identity, message, text readability,
asset consistency, signature motion, transitions, sound alignment,
natural ending, and final hold.
For each defect, report timestamp, visible or audible evidence,
viewer impact, and a concrete proposed fix.
Compare the previous and current exports on those same points.
Do not report a pass based only on a contact sheet or render success.

Before calling the film finished, verify:

• The first frame, all transitions, and the last frame render correctly.
• Text is readable at the target size and remains on screen long enough.
• Audio plays throughout, effects align with actions, and the ending sounds intentional.
• The file opens, seeks, and plays through to the end.
• Resolution, aspect ratio, frame rate, and duration match the brief.
• Editable source and required assets are included, with production credits and usage boundaries intact.

Keep a Reference Library You Can Reuse

A useful library records more than attractive thumbnails. Store the original creator and link, the reason for collecting the film, its motion family, intended audience or use case, asset requirements, analysis notes, and current status.

Use a simple progression: idea → analyzed → in production → finished. Add an idea with three fields first: a name, a link, and why you saved it. Enrich it when it becomes relevant to a real project. A table supports comparison, a gallery supports visual browsing, and a status board shows what is ready to use.

Common Questions

Do I Need 3D for a Polished Film?

No. In these projects, typography, cards, and product arrangements were often handled with 2D tools. Use 3D when perspective or spatial movement is central to the message. Additional rendering complexity should solve a visible problem.

Why Review Stills If the Final Work Moves?

Stills expose wrong hierarchy, inconsistent assets, unreadable copy, and weak composition cheaply. They do not replace motion review. Approve the visual system first, then test the hardest moving segment with sound.

What If the Film Feels Static?

Inspect where the energy disappears. The issue might be a long hold, repetitive easing, a soundtrack without contrast, or a shot that adds no information. Keep deliberate reading pauses. Adding movement everywhere can make the film harder to follow.

Your First Practice Project

Pick one product and one message. Choose a reference from the appropriate family, analyze its beats, and write an original brief with one signature motion. Choose sound, prepare representative stills, approve the difficult segment, then render and review the whole export.

Stop when the message, picture, sound, and delivery all satisfy the brief. Keep the source and the review notes together: they make the next revision easier than starting from another vague prompt.