# Network Path Animation

## Essence

Generic clustered graph motion visual for a network of nodes, connections, and moving paths.

`Network Path Animation` is a child component of `Use Case Item`. It describes a visual pattern, not a specific use-case.

When a pre-rendered loop is available, `Network Path Video Animation` can wrap this SVG source and render WebM/MP4 instead for lower runtime cost.

## Use When

- A use-case needs to suggest graph structure, memory, relationships, routing, context, or decision paths.
- The visual should feel like a system tracing meaning through connected clustered knowledge.

## Internal Rules

- Keep the component name generic.
- Use only as a visual child for `Use Case Item` / `Use Case Card` gallery presentation.
- Stay parent-container agnostic: do not assume a fixed aspect ratio from `Use Case Item`.
- Use SVG cover behavior so nodes and paths preserve their proportions in any parent shape.
- Frame the SVG from generated graph bounds with only a small padding; do not show the whole artboard if it creates empty space around the graph.
- Use a clustered graph reference style: dense organic groups around several stronger hub nodes, not a uniform mesh.
- Prefer a white graph-screenshot treatment with dark nodes, green/yellow local links, and orange/red stronger hub/backbone links.
- Build local triangle-like cells inside clusters, then connect clusters through a small number of stronger backbone links.
- Every animated pulse route must sit on top of visible graph links; do not let moving points travel along invisible helper paths.
- Assign a deterministic pseudo-random depth to nodes and connected paths so the graph can move with subtle camera-tilt parallax.
- Camera tilt should read as slow left/right sinusoidal motion: closer nodes move farther/faster, distant nodes move less.
- Node color should also express depth: farther nodes render darker, closer nodes render slightly lighter.
- Keep parallax small enough that graph links still read as connected structure rather than detached particles.
- During parallax, links, active paths, and pulses must be derived from the same live node positions; never move lines and nodes as independent CSS layers if it can break endpoints.
- Avoid visible grid, row, wave, or rectangular mesh structure.
- Avoid tree-only topology: the component must read as a connected graph with visible loops/cells.
- Some nodes should carry more visual weight through hub color and slightly larger radius.
- Respect reduced-motion preferences.
- Do not place title, labels, or use-case copy inside the animation.
- Do not delete this SVG source when adding video loops; video wrappers should keep it as the source/fallback child.

## Code Paths

- `packages/design-system/src/components/NetworkPathAnimation.astro`
- `packages/design-system/src/components/animations/NetworkPathAnimation.astro`
- `packages/design-system/src/components/NetworkPathVideoAnimation.astro`
- `packages/design-system/src/components/UseCaseCard.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`