Explainers / CANVAS
Process flow
Three labeled steps connect in sequence as a dot travels between them.

DKC reference implementation; not an original creator video. You can play, pause, and inspect time in the reference.
Make it fit your project.
Build an eight-second process diagram with three supplied step labels. Reveal nodes one at a time, draw each connector after its source node settles, and move one dot along the completed path. Hold the complete diagram for two seconds with all labels visible.
Build and check.
- Confirm the supplied content, target environment, and required assets before implementing.
- Build an eight-second process diagram with three supplied step labels. Reveal nodes one at a time, draw each connector after its source node settles, and move one dot along the completed path. Hold the complete diagram for two seconds with all labels visible.
- Expose seek(t) so frames can be inspected deterministically; add play, pause, replay, and a reduced-motion still.
- Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.
Know the limits.
- The moving dot is illustrative unless it is driven by actual process data.
- The prompt guides a coding agent; output quality depends on its implementation and review.
Want us to build it?
Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.
Catalog 2026-10-22.a82e12098f76 · Source revision sha256:dfbe6519cbc4fc84acc4cbf926d8a01c7f2e248dd46cedd67a9112b0e928c2ba