All lessonsCompose a short promo
Arrange a message, visual anchor, and call to action into one timed scene.
In this studyHierarchy, staging, readable holds
01Design the read order.
A short promo has little time to explain itself. Choose the first thing the viewer should read, then stage supporting information after it.
Animate the hierarchy.
Use timing to direct attention. Staggered entrances can clarify what matters; simultaneous motion often makes every element compete.
Leave a hold for comprehension.
The last frame is part of the design. Hold the complete message long enough to understand before the composition cuts away.
Try the examplesocial-promo
SCRUB TO EXPLORE30 FPS 60 FRAMES
A SMALL PATTERN
Under the motion
const titleFrame = frame - titleStart;
const titleProgress = spring({
frame: titleFrame,
fps,
config: { damping: 16 },
});
YOUR TURNIdentify the first-read element in the preview. Adjust its copy or timing so the call to action has a clear, uninterrupted hold.