Who this is for: Marketing and design teams planning landing-page interface motion.
What to prepare
- Landing-page headline and layout
- One verified action
- Matched start and result states
- Replay treatment and representative still
Copyable creative brief
An authored planning example. Replace illustrative details with your approved product facts and assets.
Illustrative brief: create a 15-second loop for a fictional request product whose page says, “Give each request a visible owner.” Hold sample request R-019 with Owner: Unassigned, demonstrate the verified assignment to Example reviewer and hold the confirmed result. Restart through a neutral “Sample demonstration — Replay” frame so the assignment does not appear to undo itself. Keep the record identifier and sample-data label readable. The loop supports the page headline; it does not claim measured productivity or an actual customer outcome.
Choose a task small enough for the placement
A suitable input is one verified action with a clear before-and-after state: selecting a view, assigning an owner or revealing a relevant detail. Provide full-frame assets, exact labels and evidence of any implied interaction.
A complex setup wizard, a long approval chain or an unverified integration is a poor fit for a short loop. Use a longer linked demo when the task cannot remain accurate and readable within the placement. Do not invent a one-click shortcut to meet a visual target.
Design the page and loop together
Let surrounding text carry the main explanation and keep the video focused on proof. The starting frame should establish context, the action should be legible and the result should receive a stable hold. Avoid simultaneous headline animation, moving backgrounds and several active UI regions.
Plan a representative still and essential page text so meaning does not depend on motion. Actual playback controls, loading behavior and reduced-motion handling belong to website implementation and need verification in the deployed page. A storyboard alone cannot prove them.
Make the replay boundary honest
The illustrative assignment loop ends in a saved state. Returning directly to Unassigned through an animated field reversal could imply the product loses the assignment. A neutral replay frame identifies the reset as presentation behavior.
For a 30-second version, extend context and inspection rather than slowing every movement equally. For a narrow placement, recompose around the request identifier and owner field; simply cropping a desktop screen may remove the labels that make the action meaningful.
Review in the actual page context
Inspect the final-to-first cut, silent viewing and the smallest intended display size. Check that the result remains readable beside the headline and any player controls. Review all possible camera regions for sensitive information.
This is an illustrative planning brief, not a rendered asset or a claim that a particular loop improves conversion. Track the source UI version so a changed control or commitment step can trigger a targeted update.
Review checklist
- The action supports the page’s main sentence.
- The result has a stable readable hold.
- Replay is not mistaken for product reversal.
- Essential meaning remains available outside motion.