MOTIONSTASH
Sign up
All components

Packet Dot Flow

Diagrams

Requests stream along the top in accent and return underneath in muted, with per-hop latency labels and a loop that closes exactly

Download preview768×432 preview render — the full-resolution file comes from running the component
8 seconds
Format
Packet Dot Flow — Requests stream along the top in accent and return underneath in muted, with per-hop latency labels and a loop that closes exactly

This is the format it was composed for. Switch above to see it lay itself out for another — same animation, re-arranged for the frame.

diagramflowlatencyloopexplainer
For developers — source, dependencies and provenance

Dependencies

remotion@remotion/shapeszod

No Tailwind, no CSS, no asset files. Inline styles only.

Source

Filesrc/registry/items/packet-dot-flow.tsx
Frame1920×1080
Duration240f · 8s @ 30fps

Provenance

ToolClaude Code
ModelOpus 5
Authormotionstash
LicenseMIT

Prompt

Data flowing between services: dots travelling right along a top rail and returning left along a bottom rail in a muted colour, with latency labels on each hop, looping seamlessly.

Similar components

Architecture Flow — A system diagram assembles column by column, with orthogonal connectors that only draw once both of their endpoints exist

Architecture Flow

16:9 · 8s

Checklist Tick — The whole list arrives first to set the scope, then each item ticks in turn with the one overshoot this library allows

Checklist Tick

16:9 · 8s

Doodle Card Stack — Hand-drawn marker cards drop into a stack bottom row first, each outline wobbled off true by its own seed

Doodle Card Stack

9:16 · 5s

Layer Stack Explode — An isometric stack separates plate by plate and holds as a labelled architecture diagram, with leader lines waiting for their layer to settle

Layer Stack Explode

16:9 · 8s

Sticker Hub Diagram — A hub-and-spoke diagram on graph paper where each edge wires out from the centre and lands its node as it arrives

Sticker Hub Diagram

16:9 · 5s