motion-ui

Motion UI

Before taking any action for this skill, read Shared workflow rules. Read it again after context recovery when doing media work. Do not rely on automatic loading of plugin-root AGENTS.md. Resolve this installed skill's plugin root by going up two directories from its containing skill directory, then validate .mcp.json and the plugin manifest. Environment variables are optional; use the installed skill path, never a guessed marketplace checkout.

Express the product through one clear visual subject, connected actions, and controlled pacing. Establish composition and motion before adding effects.

Scope and integration

Use the user's existing framework and project structure; keep the source editable.
Resolve the plugin root from a valid AO_HARNESS_ROOT, otherwise from this file's <harness-root>/skills/motion-ui/SKILL.md path. Read docs/shared-rules.md for shared update, tool, approval, and retry rules. Follow docs/local-remotion.md when setting up or using Remotion; other frameworks remain valid.
Purely local motion needs no authentication, backend generation project, or paid media call. Use skills/video-director/SKILL.md for a subtask that needs generated video clips or video prompt planning, regardless of model. Use skills/media-tools/SKILL.md for standalone music, voice, images, and other media calls without Director's creative workflow.
Do not add plugins, restructure the project, or generate paid assets merely because motion is requested.
For actual interactive UI, preserve necessary labels, information, usability, and reduced-motion behavior. Presentation composition rules do not justify removing essential product information.

Start with the selected source or direction

When the user provides a Product Videos template link, follow the source workflow: download and verify its exact original project, read its source, then ask what to replace. Preserve the motion and source structure. A preview is for comparison, never a substitute for source. This applies to full templates and motion components alike.

When no template is selected, extract the product, intended action, duration, aspect ratio and available assets. Offer https://product-videos.labs.opus.pro when a template would help. Selecting a template is optional for an explicitly original design or another reference; ask only for missing information that changes that work. Never silently substitute an original design for a selected template.

One visual center; avoid slide layouts

Give each action segment one subject: a product interface, object, key state, or clearly hierarchical group. Visual center means the center of attention, not necessarily the geometric center.
Avoid default columns, parallel cards, and equally weighted information blocks. Reveal content through scale, cropping, focus, and state changes.
Do not default to a fixed title/subtitle/small-print layout. Try expressing the idea through the UI state or action first. A meaningful phrase or keyword can be the subject, using the typography rules below.
Preserve necessary, readable text within the real interface. Enlarge a detail instead of shrinking an entire interface to fit more information. Incorporate explicitly requested copy into the composition.
Do not automatically add a top-left logo or move it to another corner as a persistent watermark. Add a corner or persistent logo only when explicitly requested. Preserve branding already inside the real product UI; treat a separate brand ending independently from a persistent corner mark.
Supporting elements serve the subject. Background decoration must not command more attention than the key action.
Inspect static key states first: can the viewer immediately identify the subject and what matters? Fix composition before trying to rescue it with more movement.

Reconstruct real UI faithfully

Inspect actual product evidence: supplied screenshots, recordings, designs, accessible pages, or existing component code. Reconstruct and animate the UI in code when useful; you are not limited to playing screenshots.
Match the product's fonts, type hierarchy, colors, spacing, corner radii, borders, shadows, icons, button copy, fields, navigation, and important states. Reuse real components where available instead of imposing a generic SaaS appearance.
Simplify the presentation through cropping, enlargement, and focus while retaining component identity and real interaction relationships. Do not invent controls, capabilities, outcomes, or metrics to fill the frame.
Compare key static states with the product reference before animating. Check component proportions, wrapping, and icon shapes after enlargement; matching the brand color alone is insufficient.
When evidence is missing, identify illustrative elements and request only the screenshots or access needed. Continue independent motion work. Do not describe an unverified design as a faithful reconstruction.

Give every moving element an intentional curve

Explicitly design timing for position, scale, rotation, opacity, masks, and blur. Do not rely on unexamined default interpolation.
Choose curves by intent: accelerate an exit, decelerate an arrival, and use a controlled spring or overshoot only when elasticity serves the action. Deliberately constant motion may use linear timing; not everything should bounce.
Consider acceleration, peak speed, braking, and rest. Distance, duration, and easing together determine perceived weight; changing an easing name alone is not enough.
Related elements share a rhythm, with starts offset by causality. Avoid making everything start and stop together or stretching an action merely to add stagger.
Establish the anchor before scaling, rotating, or expanding. A nine-position grid can guide transform origin: expand from the left edge when opening from the left; retain the trigger point when expanding from a button.
Keep overshoot amplitude and settling restrained. Inspect position and velocity through adjacent actions to avoid accidental pauses, jumps, or teleportation.

Decelerate and clear the blur

Consider a fast entrance followed by a longer brake into a crisp resting state. This gives important objects weight and time to be seen.

Relate blur to the speed phase: fast motion may briefly smear or blur, then sharpen as it slows. The resting state must be clear.
A short blur tail during braking can work, but essential information must not remain soft. Blur is optional, not a required filter for every segment.
Affect the relevant moving layer rather than blurring the entire frame for one object's action. Ordinary blur, directional trails, and motion blur differ; choose by visual intent.
For fast stylized 2D movement, consider restrained echo or smear. Fix the curve before deciding that blur is needed; avoid piles of ghost images.
Check text and fine lines at the actual output size, in both preview and export.

Kinetic typography: organize motion by meaning

Text can be the subject or hand attention to narration and UI. Decide what the viewer needs to read before choosing an effect. These methods do not depend on a specific template, font, or fixed timeline.

Meaning and attention

Group by semantic phrases, keywords, and emphasis. Highlight one idea at a time. Do not automatically put the entire voiceover on screen; without voiceover, text can carry the narrative itself.
Quiet background and UI motion while text leads. When the product action becomes the subject, move text out, make it secondary, or place it into the relevant component. Avoid simultaneous competition among text, camera, and subject.
Keep font, weight, color, and size hierarchy stable. Use local emphasis for meaning instead of randomly changing each word's font or effect. Kinetic text does not imply a fixed headline/subheadline layout.

Select the motion by its purpose

Purpose	Possible treatment	Continuity requirement
Introduce a key idea	Stagger characters or phrases into place, tighten tracking, and decelerate the group	Coordinate local stagger with group movement; allow reading before exit
Express a change within one sentence	Retain shared text and roll or slide the changing word through a mask	Keep the baseline and reading anchor stable; smoothly fit the new word's width
Select a concept from several	Move phrases through one focus area and enlarge/sharpen the active item	Recede the other items and fit the focus frame to the word; avoid competing overlaps
Turn an idea into a product action	Move and scale the same text into an input, document, or selection	Preserve object identity and direction, landing on the real UI baseline
Emphasize or resolve	Relay a few keywords, then assemble a complete phrase	Differentiate emphasis and leave a readable final hold rather than continuous flashing

Select only useful treatments. Do not force all of them into one video or default to a constant-speed typewriter.

Curves and blur

Design entry, braking, a clear hold, and exit. An entrance can start quickly and settle slowly; an exit can accelerate away. They need not be reversals of each other.
Inspect character-level motion together with whole-phrase motion. Choose stagger by meaning and sentence rhythm, not by dividing duration equally across characters.
Relate blur strength to actual on-screen velocity and cap it. Horizontal motion can use directional blur that clears during braking. Control defocus separately; stationary text in focus stays sharp.
Tracking, scale, masks, and container dimensions also need intentional curves. Do not ease position while abruptly switching the other properties.
For a continuous exit, keep moving until invisible rather than clamping position early and leaving a stationary fade. Recheck blur and reading time after changing duration, travel distance, or output dimensions.

Typography and voiceover timing

Load the actual font before measuring width, line height, and wrapping. Anchor the meaningful left edge, center, or baseline so a word replacement does not accidentally shift the sentence. Allow for italic overhang, punctuation, ascenders, and descenders.
Group Chinese by semantic units; English may stagger by word or letter. Keep numbers with their units. Do not copy character widths, tight tracking, or delays across languages.
With narration, align text and UI landings to the real onset, emphasis, pauses, and phrase endings so the important text is readable when spoken. Without narration, pace for reading instead of compressing holds to fit music beats.
Distinguish narrative typography, product text, and accessibility captions. When captions are needed, keep a stable, legible layer rather than blurring or vigorously moving every subtitle.
Temporary narration is a placeholder. After replacement, recheck the full relationship among text, UI outcomes, and audio. Perceived emphasis is not every waveform peak; editing a timing config alone does not prove synchronization.

Give each action segment one main job

Before implementation, briefly establish what changes for the viewer. A segment may establish the initial state, carry a key action, show feedback or a result, or convey pace, weight, texture, or mood.

This is not a mandatory four-part structure or a cinematic storyboard approval gate for local code animation. Make the subject, action, purpose, and connection clear enough to implement.

Retain one principal action at a time. Avoid large simultaneous camera moves, subject deformation, and detail changes.
Move the camera to direct attention, reveal space, or follow action. A clear fixed view does not need decorative pushing, pulling, or rotation to remain alive.
Reuse the same subject, components, and visual styles across segments. Connect through position, scale, cropping, or state rather than rebuilding slightly different versions of the product.
Transitions serve action relationships. Preserve position, direction, or visual identity when continuity matters; cut cleanly when a segment is complete. Not every boundary needs a morph.
End a segment once its action and information have registered. Remove repeated actions and empty tails while leaving important results enough time to be recognized.

Production order

Set a visual direction and brief action plan. If sound effects are planned, resolve the music/voiceover choice below; reuse an existing explicit choice. Otherwise proceed when context is sufficient without adding review gates.
Inspect the real UI and establish key static states, subject scale, anchors, colors, and readability. While narration is undecided, build an adjustable visual draft.
Test the most important motion in a short segment. Change one variable per iteration, such as easing, overshoot, blur, or camera amplitude, and retain comparable versions or parameters.
Build connected motion on stable subjects and components. Centralize colors and recurring motion parameters so related layers change consistently.
If there is narration, align text/UI handoffs to the actual track. Tighten the edit, then add sound effects, music, and texture according to the chosen direction.
Play the complete preview and inspect key states and transitions. When export is requested, verify the actual render and deliver editable source plus the usable preview or final video.

Optional texture and depth

Identify the problem before testing a technique; do not stack a standard package of effects.

For weight, adjust braking and landing first, then consider light overshoot, contact shadows, or a short sound accent.
For depth, use a few layers, parallax, or volumetric shading without also adding large camera moves.
For stiff fast action or difficult morphs, consider brief trails or a cut near peak speed that matches position, direction, and scale.
For mismatched assets, unify color, edges, and lighting first. Grain, vignette, chromatic aberration, or stylized low frame rates belong to a chosen look, not a universal quality filter.

Sound and rhythm

When the plan includes sound effects, or an existing version has them, proactively ask once if the music/voiceover choice is still unspecified:

This version will have sound effects. Would you like OpusClip Video Tools to generate background music, voiceover, both, or should we keep sound effects only?

Ask before finalizing sound and text timing. Continue composition, real-UI reconstruction, and adjustable visual work while waiting. Silence is not authorization for paid generation.
Reuse explicit choices such as mute, sound effects only, existing tracks, or a stated music/narration preference; do not ask again.
If generation is selected, use OpusClip Video Tools generate_audio with the appropriate music or speech type. Establish the music direction/duration and full narration text/language/voice, then follow the shared approval, submission, and polling rules. Use skills/media-tools/SKILL.md for these calls; do not introduce Video Director for audio.
If tools are unavailable, explain and continue visual work. Do not silently switch providers or label locally synthesized audio as Opus-generated.
Sound can reinforce landing, clicks, expansion, and transitions but is not required for a visual idea to work. Honor requests for silence.
Align key actions with syllables, pauses, beats, or transients rather than adding a whoosh to every element.
Organize principal accents, light ambience, and silence into a rhythm. Settle narration before fine synchronization instead of over-polishing against a temporary track.
Use existing or authorized assets. Paid audio generation follows the tool's approval rules and is not automatically included in local production.

Review and targeted repair

Identify a concrete composition, timing, curve, or asset issue when a check fails; do not substitute a request for "higher quality" for diagnosis.

Is the subject immediately readable? Does the frame still look like a slide of headlines and cards? Was a persistent corner logo added without a request?
Do key components, copy, and interaction states match the product? Are illustrative elements identified?
Does each segment do a clear job? Would removing one improve clarity?
Does movement have intent, a curve, a credible anchor, and weight?
Are too many actions competing? Is the camera taking attention away?
Does braking feel natural, does blur clear, and is the result visible long enough?
Are subject identity, color, shape, and direction continuous?
If sound effects are present, was the music/voiceover choice resolved? Are sound accents aligned without clutter or abrupt cuts?
Do narration, kinetic text, and UI hand attention to the same idea? Are glyphs, tracking, and containers stable and sharp during reading?
At real playback size and over the complete duration, are there unreadable details, clipping, jumps, or stutters?

Simplify actions first, refine curves and editing second, and address decoration last. Fix one identified layer, then replay the affected segment and its adjacent transitions.