# Network Path Video Animation

## Essence

Pre-renderable video shell for the graph animation.

`Network Path Video Animation` lets the Portfolio use a WebM/MP4 loop for production performance while keeping `Network Path Animation` as the SVG source and fallback child.

## Use When

- A graph visual is decorative and should cost less browser runtime work.
- A pre-rendered WebM or MP4 loop exists for `Network Path Animation`.
- `Use Case Card` needs the network-path visual but should be able to switch from SVG to video later.

## Internal Rules

- Keep this component generic; it is not named after a specific use-case.
- Accept `webmSrc`, `mp4Src`, and `posterSrc` props.
- Prefer WebM first and MP4 second when both are available.
- Render the original `Network Path Animation` child when no video source is supplied.
- Do not render both video and SVG at the same time when a video source exists; the point is to save runtime computation.
- Preserve cover behavior with `object-fit: cover`.
- Keep `Network Path Animation` as the source-of-truth visual that can be pre-rendered into video assets.

## Code Paths

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