A three-step onboarding sequence

Loading the reference animation...

600 × 600 · 30 fps · 3 seconds · Designed to play once and hold

Keep the reference files

These original reference assets are free to use and modify. New editor exports follow Free and Pro limits.

Try this prompt

Connect your assistant to a new project first. Ask it to read the current project before editing. The supplied file is a reference result; another model or prompt variation may produce different geometry or timing.

Create a 600 by 600, three-second onboarding animation. Put three circles at x 150, 300, and 450, y 300, and connect them with thin pale lines. Reveal the first circle at zero seconds, the second at 0.7 seconds, and the third at 1.4 seconds. Scale each from 70 to 100 percent while fading in over 0.35 seconds. Grow each connecting line from its left edge just before the next step appears. Hold the complete diagram after two seconds. Use purple, lilac, and green. Keep all layers editable and export a project backup.

Lay out the whole sequence

Keep circle centers 150 pixels apart. The connecting segments end at the circle edges, so they do not cut across the symbols.

Reveal in reading order

The circles enter at zero, 0.7, and 1.4 seconds. Each transition lasts 0.35 seconds, giving the eye time to move to the next item.

Pin each connector

Animate width and x together so the line extends from its left endpoint. The right circle should appear just as its connector reaches it.

Connect it to real steps

This is an illustrative sequence, not a state machine. Use application code and accessible text to report a user’s actual progress. Use the completed diagram as the reduced-motion fallback.

Watch the reference motion

Finish and check

Preview the first frame, the moving portion, and the held final state. Compare the export in the player you will use. Keep meaningful labels outside decorative animation and use the PNG when reduced motion is requested.