Skip to content
All work

AI video & adsYear

Reelsmith: AI Video and Ad Generation

How I make videos and ads with AI: a written brief becomes a storyboard, generated shots, a motion design pass and a finished ad in every format. Interactive motion demos run on the page.

Select any part of the ad run to see what it does.

One ad, animated in your browser: brief, storyboard, generated shots, the motion pass and three formats. Drawn to show the workflow, not a recording of a real ad.

Role
Concept, AI generation and motion design
Timeline
Dates
Team
Solo or team size
Stack
  • AI video and image models
  • Editing and motion tools
  • React, Motion and Canvas (the demos on this page)
Links

    Overview

    Reelsmith is my workflow for AI video and ad generation. I write the brief, turn it into a storyboard, generate each shot with AI video and image models, then design the motion: type, transitions, product moves and the call to action, cut for 9:16, 1:1 and 16:9. The demos further down are the motion side of that work, built in code and running in your browser.

    Problem

    AI models can generate a good shot, but a shot is not an ad. Without a storyboard the shots do not add up to a story, and without motion design the type, timing and call to action look pasted on. Every placement also needs its own cut.

    Approach

    Plan first, generate second, design the motion last. The brief fixes the message and the shots, each shot is generated against its storyboard frame, and then every layer gets its own keyframes on one timeline. One easing curve, expo out, runs through all of it so the ad moves as one piece, and the same timeline is laid out once per aspect ratio.

    From brief to finished ad

    One ad

    The order matters: the story is fixed before anything is generated, and the motion comes last.

    • check
    • tool
    • person

    1. 01 / 06person

      Brief

      Write the message, audience, length, look and call to action.

    2. 02 / 06person

      Storyboard

      Sketch the shots so the story works before generating anything.

    3. 03 / 06tool

      Generate shots

      Generate each shot with AI video and image models against its storyboard frame.

    4. 04 / 06check

      Review

      Compare every shot with its frame and generate again where it drifts.

    5. 05 / 06tool

      Motion pass

      Animate type, product, transitions and the call to action on one timeline.

    6. 06 / 06tool

      Cut the formats

      Lay the same timeline out for 9:16, 1:1 and 16:9.

    Motion demos

    Built in code for this page and running in your browser, with the same curves and timings as the rest of the site.

    linear

    mechanical

    expo out

    the site's curve

    spring

    with momentum

    Easing

    The same move with three curves. Expo out starts fast and settles softly; a spring is for things that were thrown.

    Madetomove.

    Launch ad, 15 s

    Try it free

    Kinetic ad

    A 9:16 ad from timed layers: the headline rises out of a mask, the product lands, the call to action arrives, then the end card.

    Brief

    Product flow

    Three steps of an ad tool. The step indicator slides between tabs, and each screen enters from the side you are heading.

    Path drawing

    A route draws itself while a marker rides it, the kind of move used for flows, maps and product journeys.

    Architecture

    • Brief to Storyboard
    • Storyboard to Shot generation, frames
    • Shot generation to Review, shots
    • Review to Motion timeline
    • Motion timeline to 9:16
    • Motion timeline to 1:1
    • Motion timeline to 16:9
    The brief drives the storyboard, the storyboard drives generation, and one motion timeline turns the shots into every format.

    Gallery

    Challenges and solutions

    Challenge: Making motion feel like one piece.
    Solution: One timeline and one easing curve for every layer, with staggered entrances kept short, so type, product and call to action read as one move. The demos below show the same rules running.
    Challenge: Another challenge, such as keeping a product consistent across shots
    Solution: How you solved it

    Outcomes

    • Four interactive motion demos on this page: easing, a kinetic ad, a product flow and path drawing, all running in your browser.
    • Ads or videos you shipped, and how they performed