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.
---
name: marketing-ui-animation
description: 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.
---
# marketing-ui-animation
The robotic linear cursor is the fastest "this is fake" tell in software marketing, and the audience that watches launch films - developers, founders, design-literate buyers - pattern-matches fakeness professionally. One impossible screen or one metronomic keystroke poisons every true claim in the film. This skill exists because AI-generated video never carries legible product UI: every UI beat is a Remotion-rendered recreation on the canonical fixture data, and this is the performance layer - the UI is the actor, and it must hit its marks like a person, on the beat.
## Operating procedure
Run the steps in order: fixture data before any choreography, staging before camera. Every downstream shot reuses the same records, so the dataset must exist before the first cursor path is drawn - and the camera serves the staging, never the reverse.
### Step 1: Gather the brief
Paste the charter block if one exists. If the client has a charter but the foundations pack is not installed, elicit the needed values directly and label them provisional. If no charter exists at all, halt and route to premium-design-foundations - never substitute worked-example values.
Then ask for exactly these inputs:
1. **Screens**: the real product screens being recreated. Refuse to proceed on invented UI - recreating the real product is the honesty floor the whole film stands on.
2. **States**: the feature's actual before and after states as they exist in the product, not as the script wishes they looked.
3. **Grid**: the beat grid, if the shots live in a trailer - pull beat and downbeat frames from launch-trailer-director. If that skill is not installed, elicit BPM and fps directly, derive the grid, and label it provisional.
4. **Delivery surface**: rendered film or hero embed - it decides resolution and crop factors.
If any input is a guess, label it a guess and move on.