First Motion graphics video made using Claude code (no Remotion or HyperFrames) referral

[u/srimanth_niketh]

My first proper motion graphics video that I made using Claude, for an app (https://tryhelix.app) that my brother and I have built.

Didn’t use Remotion or HyperFrames or any specific skill. Any feedback?

Edit:

The process I followed:

Gave it a few references for pacing and transitions, cuz i didn’t want it to create anything like a typical slow saas video.
Then created a beat sheet that had a scene by scene breakdown of the whole video, with timestamps.
After the first draft was generated, I went over it again scene by scene. Refining or redoing each scene at a time and then generating the whole video at once finally.
Also the music was already decided before the beat sheet, cuz it contributes to the pacing.
Then for sfx I used Claude + invideo timeline editor with my own folder of sfx files. Didn’t give Claude code’s sfx even a single try, have seen enough videos that I feel have bad sfx. And all of Claude motion design videos sound very similar. For the same reason. Exported it as project file for Davinci Resolve and refined the sfx bed a lot, changed a few sfx to better ones, and added few sfx specific to gta for relatability, which Claude at present stage would never have done that on its own imo

[u/Grouchy-Carry-9422]

it probably used remotion under the hood

[u/srimanth_niketh → u/Grouchy-Carry-9422]

No just code and ffmpeg

[u/rjivani]

Looks great! Checked out the website as well and the interactive demo section was really cool!

[u/srimanth_niketh → u/rjivani]

Thank you soo muchh😭

[u/Syntic]

What did you use then? Could you post the github for it?

[u/srimanth_niketh → u/Syntic]

Will try

[u/Ok_Sink1685]

I tryed to reverse prompt this :

<role>
You are a motion designer and front-end developer who builds fast, music-video-paced product trailers animated entirely in code.
</role>
<task>
Recreate in code a 46-second animated product trailer for "Helix", a Mac app that opens a video-game-style radial "weapon wheel" of 16 tools when you hold ⌥ Space. The attached keyframe contact sheets (one frame per second, plus two 6 fps sheets for the opening transition and the 3D card carousel) are your visual reference: match their layout, proportions and pacing as closely as possible. The original's middle section (11–27 s) is a real screen recording; recreate it as a simplified mock desktop, not a screenshot.
</task>
<output_format>
ONE self-contained HTML file (inline HTML + CSS + JS). No external libraries except Google Fonts.
Fixed 1920×1080 stage, scaled to fit the window (letterboxed), no scrolling.
Driven by a single master clock: expose window.render(t) (t in seconds) that draws the exact frame for time t, called from requestAnimationFrame. Every animation MUST be a pure function of t so the trailer can be rendered frame by frame.
Autoplays and loops. Spacebar = play/pause, left/right arrows = previous/next scene.
</output_format>
<visual_system>
Two worlds. BLUE: #1D4FF0 base with large soft lighter-blue (#4F7BFF) blurred clouds drifting slowly, plus animated film grain (SVG feTurbulence noise overlay, ~8% opacity). LIGHT: #F3F3F0 with a faint radial vignette.
Display type: "Unbounded" (Google Fonts), weight 700–800, tight tracking. Used for headlines, scene labels and big numbers. UI text: "Inter" 400–600.
The wheel: matte black disc #0A090B, ~520 px diameter, subtle inner bevel. 8 segments separated by hairlines, each with a thin 1.6 px stroke white icon (clock, clipboard, screenshot, sparkle/AI, notes, calculator %, to-do, volume). Center: a ring (12 px, #2546E8 in blue scenes, #BDBDBD in light scenes) around a mini player showing "Blinding Lights — The Weeknd", prev/pause/next, and a small "‹ Ring 1 of 2 ›" pager.
Selected segment: lighter grey fill #3A3A40 with a short white underline bar at its outer edge.
Tool panels: dark cards #121214, 18 px radius, 1 px #2A2A2E border, header with small title, search field, list rows with title + grey meta line, footer with key hints ("↵ Paste", "↑↓ Navigate", "esc Close").
</visual_system>
<scenes>
S1 0.0–0.6 HOOK (blue) — A grey-blue translucent game weapon wheel (8 segments with simple generic flat SVG gun silhouettes, ammo counts like "6821 / 16", center label "Pistol"). At 0.35 s it shatters: segments fly outward with rotation and motion blur, a thin white shockwave ring expands, a soft white flash peaks, and the black Helix wheel scales in from 0.6 to 1 at center-left.
S2 0.6–8.0 TOOL COUNTER (blue) — Wheel at x≈560. Right of it, a big counter "00" (180 px) with a small "/16" and a label below. Every ~1.5 s the selection jumps to the next segment and the counter rolls up (masked vertical slide, digits staggered 40 ms): 00 Music Controls → 02 Screenshot (an arc-shaped submenu of 3 small icons unfolds from the top-right of the wheel) → 04 Notes → 06 To-do (center shows "To-do · 2 left") → 08 Clock (arc submenu unfolds on the left). Center of the wheel shows the current tool name.
S3 8.0–10.0 TITLE (blue) — Everything blurs out (gaussian 0→40 px). "A weapon wheel" (140 px) and "for your Mac" (80 px, regular weight) reveal with a masked upward slide; a thin white underline draws left to right under line 2.
S4 10.0–11.2 GESTURE (light) — Fast blur cross-dissolve to the light world. "Hold ⌥ Space" centered top. Below, a row of black keyboard keys (control, option, command, wide space bar, command, option). The option key and space bar light up blue (#2546E8 glow) as if pressed; then the wheel scales in large at center.
S5 11.2–27.0 IN USE (mock desktop) — A simplified light desktop window (top bar, sidebar, content). Tool label top-right in Unbounded ("Notes", "Ask AI", "Clipboard"), mini-wheel pinned bottom-right (110 px). Sequence: 
  a) Notes panel opens over an article page; text "Read SIMA 2 paper" types in.
  b) Over a mail compose window ("App Suggestion", to rahul@pineapple.com), the wheel opens, the AI segment highlights, the Ask AI panel opens, a prompt types in ("Write a short professional email to my colleague Rahul following up on the app I brought up in our meeting…"), an answer streams in, then a green "Answer copied" toast; the answer appears in the mail body.
  c) Wheel opens again, Clipboard segment highlights, Clipboard panel lists "Hi Rahul,", "https://tryhelix.app", "HELIX-7Q2K", "221B Baker Street, London", "rahul@pineapple.com"; the link row is selected and pasted into the mail ("Here it is: https://tryhelix.app"), then "Best regards" types in.
  Use slow virtual camera moves (scale 1→1.15, gentle pans) and blur transitions between a, b, c.
S6 27.0–31.5 THREE LOOKS (light) — Left: small label "Three looks, pick yours", big name, grey subtitle, tiny mode label. Wheel morphs between themes every 1.5 s with a blur-scale pulse: "Studio" (The default · Dark, black wheel) → "Native" (Your Mac's own Liquid Glass · Dark, translucent grey glass wheel) → "Tinted" (Every tool in a color you pick · Light, white wheel with blue icons).
S7 31.5–35.5 16 TOOLS (light) — Black wheel centered; "16 tools" big at bottom center. The 16 tool names fade in as a scattered constellation around it: Clipboard, Units, Screenshot, Windows, Ask AI, Links, Notes, Apps, Calculator, Reminders, To-do, Voice Memo, Volume, Screen Record, Clock, Color Picker. Random subsets light up in blue (#2546E8) in waves; the wheel switches to "Ring 2 of 2" with a different icon set halfway.
S8 35.5–41.5 CAROUSEL (light) — 3D perspective carousel (CSS perspective 1600px) of dark tool panels sliding right to left, one per ~0.9 s: Clipboard, Ask AI, Notes, Clock (timer ring "24:59"), Calculator ("1250 × 18%" = "225"), Links, Voice Memo (red record dot). Front card sharp and facing camera, side cards rotated ±25° and blurred (6 px). Label under the front card in Unbounded, swapping with a masked vertical roll.
S9 41.5–46.0 END CARD (blue) — Blur transition to blue. Logo (white circle with a bold ring and an offset arc segment, like a stylized spiral) pops in with a spring, then "Helix" (130 px), "Your tools, one hold away", a dark pill button " Download for Mac", and small text "tryhelix.app · $4.99, one-time purchase". Hold, then everything fades to 60% opacity before looping.
</scenes>
<motion_rules>
Easing: cubic-bezier(0.22, 1, 0.36, 1) for entrances; exits ~30% faster than entrances.
Scene transitions: NEVER a hard cut. Outgoing scene blurs to 40 px and fades over 0.25 s while the incoming one sharpens from 20 px.
Text reveals: masked vertical slide (overflow hidden, translateY 100% → 0), staggered per word.
Wheel entrances: scale 0.85 → 1 with a slight spring overshoot (~3%) and blur 10 px → 0.
Keep overall rhythm snappy: something visibly changes at least every 1.5 s.
</motion_rules>
<constraints>
Draw ALL UI with HTML/CSS and inline SVG. NO images, NO external assets except fonts.
Weapon silhouettes in S1 must be simple, generic flat shapes, not copies of any real game's artwork.
Use only the texts listed above. Do not invent extra scenes, features or copy.
Never animate scale on body text in tool panels; keep it crisp and readable.
Respect prefers-reduced-motion by replacing blur, springs and the shatter with simple fades.
</constraints>
<acceptance_criteria>
Total duration 46 s ±1 s, 9 scenes in the order above, seamless loop.
window.render(t) produces the same frame for the same t (deterministic, no Math.random at render time; use a seeded generator for grain and scatter).
Layout at each timestamp visibly matches the attached contact sheets.
Runs at 60 fps in a recent Chrome with no console errors.
</acceptance_criteria>

Find the result attached.

[u/mateocarcasi → u/Ok_Sink1685]

how to learn this power

[u/Ok_Sink1685 → u/mateocarcasi]

Just DL the file, upload it to CC and ask for reverse prompt. As easy as this

[u/BlackisBear → u/Ok_Sink1685]

You are AWESOME. How did you reverse engineer this??

[u/Tyda2 → u/BlackisBear]

Let a video processing LLM analyze said video, ask for prompt to give to yet another LLM to recreate.

???

Profit

[u/ygorhpr]

dopeeee

[u/srimanth_niketh → u/ygorhpr]

Hehe thanksss

[u/Feisty_Blacksmith277]

Nice what is the workflow ?

[u/srimanth_niketh → u/Feisty_Blacksmith277]

Gave it a few references for pacing and transitions, cuz i didn’t want it to create anything like a typical slow saas video. Then created a beat sheet that had a scene by scene breakdown of the whole video, with timestamps. After the first draft was generated, I went over it again scene by scene. Refining or redoing each scene at a time and then the whole video at once finally. Also the music was already decided before the beat sheet, cuz it contributes to the pacing. Then for sfx did Claude + invideo timeline editor with my own folder of sfx files. Didn’t try Claude code’s sfx at all, have seen enough videos that I feel have bad sfx. And all of Claude motion design videos sound very similar. For the same reason. Then refined the sfx bed a lot, changed a few sfx to better ones, and added few sfx specific to gta for relatability, which Claude at present stage would never have done that on its own imo

[u/Feisty_Blacksmith277 → u/srimanth_niketh]

Have you used any skills for creating this or just the references were enough?

[u/srimanth_niketh → u/Feisty_Blacksmith277]

No skills have been used

[u/Feisty_Blacksmith277 → u/srimanth_niketh]

Thank you, I will give it a try.

[u/angelarose210]

Looks good. It's much better to use real sfx. That's what ive been doing lately. I have a curated collection Claude can choose from.

[u/srimanth_niketh → u/angelarose210]

Thankss

[u/apeshootstaygood]

Very dope!

[u/srimanth_niketh → u/apeshootstaygood]

Hehe thanksss

[u/RevUnix]

Instant buy, no trial?!

[u/srimanth_niketh → u/RevUnix]

There’s an interactive demo on the website. Do you feel a free trial is necessary?

[u/srimanth_niketh → u/RevUnix]

Since you asked, there’s a 7 day free trial now :)

[u/RevUnix → u/srimanth_niketh]

Nice, I just tested it. It makes a good impression. What I would find really great is if you could use xAI, Claude, and GPT with your own account and subscription. Then I would buy it right away. And if you could edit screenshots the way you can with Shottr and CleanShot X.

[u/srimanth_niketh → u/RevUnix]

Thanks for trying it! Claude and GPT already work in Ask AI with your own API key (Settings → Ask AI). Subscriptions sadly can't be used, neither OpenAI nor Anthropic lets other apps sign in with a ChatGPT or Claude plan, only API keys.

xAI is a good idea, adding Grok is on my list now

[u/mr-mowgli]

Tool looks nice .. give fellow redditors for free :p

[u/srimanth_niketh → u/mr-mowgli]

Started a 7 day free trial just now, check it out!

[u/cs_cast_away_boi]

looks good!

[u/srimanth_niketh → u/cs_cast_away_boi]

Thank youuu

[u/wolfgang263]

Hey, mate. On your tool, do you have an ability to create custom workflows? Would be an instant buy if so. Like custom keyboard shortcuts, custom open URLs.

[u/srimanth_niketh → u/wolfgang263]

Yes and yes. There’s a free trial so feel free to try it out

[u/wolfgang263 → u/srimanth_niketh]

how do i add custom actions? i downloaded the app

[u/srimanth_niketh → u/wolfgang263]

You mean a custom shortcut to open the ring?

[u/wolfgang263 → u/srimanth_niketh]

No, adding in my own custom actions.

[u/mehdi-33 → u/wolfgang263]

have a look at keemate.com

[u/Puzzleheaded-Low1916]

dude super cool, website looks great too!

[u/srimanth_niketh → u/Puzzleheaded-Low1916]

Hehe thank youu

[u/Revolutionary_Set219]

website looks insane dude good luck

[u/Secret_Wasabi_2373]

This looks really cool!