Explainers / CANVAS
Network route
A packet follows a highlighted route through a small network diagram.
Network routePrompt recipe · preview pending
Prompt recipe; no reproduced preview yet. You can use the prompt now; this recipe has not yet been reproduced for the gallery.
Make it fit your project.
Build a ten-second diagram with six nodes and a single supplied route. Draw the full graph faintly, highlight the route's edges, and move a dot through them at constant distance-per-second speed. Pause briefly at the destination and show its label.
Build and check.
- Confirm the supplied content, target environment, and required assets before implementing.
- Build a ten-second diagram with six nodes and a single supplied route. Draw the full graph faintly, highlight the route's edges, and move a dot through them at constant distance-per-second speed. Pause briefly at the destination and show its label.
- 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.
- Label the topology as illustrative unless it represents a real documented network.
- 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