STEP 01
Start with one visual idea.
The city is the logo. That is the hook. The search gives it a goal. The courier and red light give it tension. Write those beats before asking for animation.
RESOURCE 004 / FREE · VIDEO + CODE
Make an ad.
Animate it with AI.
The workflow behind a 21-second Uber Eats concept: Claude Code, Remotion, a city built in SVG, and fourteen rounds of iteration.
Concept ad — not affiliated with Uber or Uber Eats.
See what you are building toward
One craving. A whole city.
Final video · 9:16 · 1080 × 1920 · 60 fps · ≈21.3 seconds. Concept ad — not affiliated with Uber or Uber Eats.
The idea before the tools
Give the motion a reason.
THE HOOK
The city is the brand.
The camera pulls back until the blocks form the name. The reveal makes the idea visible.
THE STORY
A route becomes a race.
A fictional countdown and a red light create a question. Arrival at the door answers it.
THE CONNECTION
Wherever you are.
Eight photo pins show different people. The “You” marker brings the city back to one delivery.
Understand the process
From the first idea to the final frame.
STEP 02
Build the camera before the detail.
Ask Claude Code to build a separate Remotion composition. Block the city, route and transitions with simple shapes. Check the pullback and the descent to street level before polishing buildings.
STEP 03
Add images where they matter.
Generate people and nighttime storefronts in Flow / Nano Banana Pro. The original workflow used 2×2 and 3×2 collages, cropped with Python. Check every crop and replace the placeholders.
STEP 04
Time the voice to the picture.
Generate the English narration in Artlist with the Bright voice. Transcribe it with faster-whisper for word timings. Align phrases to each scene, then use those timings for word-by-word subtitles.
STEP 05
Make the movement consistent.
Use the same easing family throughout. Overlap elements, hold important reveals for 8–12 frames, and give each moment one focus. The timing grid here is 120 BPM: fifteen frames per beat.
STEP 06
Render. Watch. Change one thing.
Save numbered cuts. Review attention, continuity and legibility at full speed. This film took fourteen versions. During development, sound effects and a provisional score came from Node scripts. The player above now shows the supplied final video.
Make your version
Start with these prompts.
Adapt the placeholders to your idea. These are new starter prompts based on this workflow, not a transcript of the original Claude session.
01 / Plan the film
Help me plan a 21-second independent concept ad for [BRAND OR PRODUCT]. The audience is [AUDIENCE]. The single idea is [IDEA]. Use one visual hook, one clear action, one obstacle, and one payoff. Write an English voiceover and a frame-based beat sheet at 30 fps. Include a creator signature and a visible concept disclaimer. Treat any countdown as fictional storytelling, not a product guarantee. Do not invent performance claims. First propose the story; do not write animation code yet.
02 / Build the motion
Implement the approved beat sheet in this Remotion React + TypeScript project. Inspect the project before changing files. Create a separate composition at 1920x1080, 30 fps, 640 frames. Keep animation deterministic and driven by the current frame. Use one main focus at a time, expo-out entrances, expo-in exits, overlap between elements, and 8–12-frame holds on important reveals. Avoid bounce in the main motion. Use a consistent 3D camera with gentle starts and stops. At 120 BPM, align movement accents to 15-frame beats. Start with simple placeholder assets and validate the camera path before adding detail. Preserve existing compositions and public assets.
03 / Create the photographic assets
Create a [2x2 OR 3x2] contact sheet of [PEOPLE ORDERING FOOD / NIGHTTIME RESTAURANT STOREFRONTS] for an independent concept film. Each cell must be a separate complete photograph, with consistent nighttime lighting, believable scale, clean framing, and clear separation between cells. Keep the palette compatible with a black, white and green graphic city. Do not include interface overlays. Keep important subjects away from cell edges so each image can be cropped cleanly. Use fictional storefront names.
04 / Direct the next iteration
Review the current render against the approved beat sheet. Identify the three most visible issues in attention, camera continuity, timing, or readability. Describe each issue with a timestamp and propose the smallest change that fixes it. Preserve everything else. Make one focused pass, render a new numbered version, and report what changed. Do not invent test results or describe changes that you have not verified.
The film in eight beats
Every moment has a job.
Reveal the city logo
Type the craving
Choose the storefront
Connect the people
Follow the courier
Interrupt the route
Deliver the payoff
Close with the creator
Approximate scene ranges. The countdown is compressed fiction, not a delivery promise.
14 versions / four checkpoints
The first cut was a starting point.
A floating phone and an order flow. Placeholder sections still remain.
Stylized storefronts and a route into the street-level sequence.
Search, people pins, a destination and the traffic-light obstacle.
A block-built logo reveal, photographic storefronts and the final creator signature.
Selected exported cuts. These checkpoints do not establish when each feature first appeared.
Before you render
Keep the experiment focused.
Check the attention.
One focal point. Readable text. A visible rider. Enough time to understand the reveal.
Check the camera.
Watch the descent without pausing. Fix jumps in perspective before adding more detail.
Check the sound.
Place narration phrase by phrase. Leave room for effects. Review music against the final edit.
Keep the concept clear.
Label independent brand experiments. Use fictional story details without turning them into product claims.
Project notes
Built in code, directed through iteration.
The final presentation places the animation inside a laptop screen in a vertical frame. The walkthrough stills below come from the original widescreen animation so its details stay readable.
All motion graphics were written by Claude in Remotion 4 with React and TypeScript. The city uses a custom SVG engine with a 3D camera, polygon clipping, depth sorting and fog. Camera motion blur comes from @remotion/motion-blur. No After Effects or 3D software was used.
Visual reference: the “Claude cooked” style of AI motion graphics, with dark backgrounds, clean interfaces and 3D cities with pins. The opening hook and delivery story are Oriol’s own.
Your next creative experiment
Pick one idea. Build your version.
Follow the next experiment and the process behind it.
Follow @sixteen.ai ↗Concept ad — not affiliated with Uber or Uber Eats.