UI component clip
Make one component the subject. A useful clip is usually three to six seconds with one action, a clear state change, and a clean loop. It should work in a reply or product page without a title or outro.
Ground the design
Inspect the real component and its styles before animating it. Use its actual dimensions, text, color, border, shadow, states, and entrance timing. Capture the running UI when possible. If rendering the component in a video composition, port the relevant source faithfully and keep animation driven by the video frame, not browser time.
Choose a quiet background from the product's visual system. Keep the camera locked or make one subtle push; the interaction is the event. Add a label only when the component cannot explain itself.
Build the loop
- For periodic motion, fit whole cycles inside the duration so the last state meets the first.
- For a one-time action, show the result briefly, then return to the starting state through a plausible reverse action or an edit on a still frame.
- Keep the pointer only if it explains how the state changes. Its tip should land on the actual hit target and remain there through the click.
- Leave enough time at the settled state to understand the result.
Compare the first and last frames and watch several repeats. A single-frame jump, double trigger, or moving object appearing in two places breaks the loop. Export the requested ratios and check that the component remains legible in each one.