Product Motion Studio

Plan a product demo, feature announcement, or launch video as a beat sheet and shot list BEFORE animating - hook in the first 3s, problem, reveal, proof, CTA - with target duration and pacing per scene type, output as a JSON scene plan that remotion-compose consumes directly. Use when someone says "storyboard my demo", "plan the video", "what scenes do I need", "plan my launch video", "map out the demo", or "break this feature into scenes" before any code. Do NOT use when the request is the animation mechanics - writing the .tsx, using interpolate/spring, registering the Composition - that is remotion-compose; do NOT use for the easing and choreography craft of a single scene - use motion-design-principles instead.

Choreographs device and app-window reveal shots for launch films - chassis settles from 0.92 to 1.0 scale, screen ignition delayed 100-200ms after the frame lands, a single timed light sweep to sell the material, then a slow camera push - so hardware and product windows arrive with mass instead of popping in like a slide transition. Use when someone asks "how should the phone reveal animate in our trailer", "the device reveal looks like a slide transition", "when should the screen content light up during the reveal", or "animate the app window arriving in the launch video", or whenever a marketing shot introduces a device, browser window, or app frame for the first time. Do NOT use for in-product UI transitions or motion tokens - use animation-system or motion-spec instead; for the cursor and typing inside the screen after ignition, use marketing-ui-animation; for building the shot in code, use remotion-compose.

Animates recreated product UI for marketing films so the interface performs like a human is using it - cursors on curved paths with hover pauses, typing at jittered per-character speed, one staged state change per beat, constant micro camera drift, and wide/close shot alternation on real fixture data. Use when someone asks "the cursor in our trailer moves like a robot", "humanize the typing in this animated demo", "the UI shots in our launch video feel dead and static", "stage this feature's state change for the trailer", or "add camera movement to the UI shots", or whenever product UI is animated for a trailer, ad, or hero video rather than screen-recorded. Do NOT use to direct a demo or tutorial walkthrough's legibility - zooms, callouts, record-vs-rebuild - use product-demo-director instead; for animated headlines and title cards, use kinetic-typography; for the reveal of the device or window that contains the UI, use device-reveal-choreography.

Directs how a brand mark behaves in motion - the trailer end-card resolve, seamless ambient loops with position and velocity matched at the seam, a rest phase so the loop reads calm, and marks that survive a 240px animated thumbnail - so the logo lands with precision instead of spinning in like a broadcast bumper. Use when someone asks "animate our logo for the end of the trailer", "our logo loop hiccups when it repeats", "make an animated logo sting", "how should the logo resolve on the end card", or "we need an animated thumbnail of our mark", or whenever a brand mark must move in marketing material. Do NOT use for animated headlines, title cards, or captions - use kinetic-typography instead; for designing or briefing the static mark itself, use logo-brief-writer; for in-product loading spinners and progress indicators, use animation-system.

Designs marketing-site hero and launch-page motion - scroll-linked scrub sections pinned 100-200vh, one signature mechanic per page, small masked reveals, and hard performance gates - so the page choreographs the story without scroll-jacking, jank, or the animated-template look. Use when someone asks "add a scroll animation to our landing page hero", "pin a section that scrubs as the user scrolls", "is this scroll-jacking or scroll-linked", "our homepage animations feel cheap and janky", or "what should move on our launch page", or when a launch page needs motion that still passes performance budgets. Do NOT use for in-product UI motion systems - use animation-system instead; for the hero's static artwork and composition, use website-hero-artwork; for the headline words themselves, use landing-page-copy; for a rendered video file embedded in the hero, use remotion-compose.

Turns a natural-language video brief into a complete, ready-to-preview Remotion composition - extracts duration, scenes, brand colors, aspect ratio, and real copy; plans the frame budget; and writes data-driven React/TypeScript using useCurrentFrame, interpolate, spring, AbsoluteFill, and Sequence, registered in Root.tsx. Use when someone says "build a 20-second product demo video", "animate a feature walkthrough", "write the Remotion code for this marketing clip", or wants a scene-by-scene composition they can scrub in Studio. Do NOT use for rendering, iterating, or batching the finished MP4 - use remotion-render instead - or for installing and scaffolding the project - use remotion-setup instead.

Score a video like an editor: beat-match cuts to the music, land SFX on transitions, pace the voiceover so it breathes, source royalty-free tracks safely, and duck the music so the VO sits clearly on top. Use when adding music, sound effects, or voiceover to a video, when asked to "sync cuts to the beat", "the music is drowning out the voice", "add whooshes on the transitions", "where do I get royalty-free music", "mix the audio", or "the VO feels rushed". Do NOT use when wiring audio into the Remotion timeline mechanically (Audio/staticFile/render) - that is remotion-compose and remotion-render; do NOT use when choosing the shot order or scene beats - use video-storyboard instead; do NOT use when tuning the visual look (color grade, lighting, contrast) - use motion-color-and-light instead.