# Gradient Grid Video Animation

## Essence

Pre-renderable video shell for the gradient grid animation.

`Gradient Grid Video Animation` lets the Portfolio use a WebM/MP4 loop for production performance while keeping `Gradient Grid Animation` as the runtime source and fallback child.

## Use When

- A gradient/grid visual is decorative and should cost less browser runtime work.
- A pre-rendered WebM or MP4 loop exists for `Gradient Grid Animation`.
- `Use Case Card` needs the gradient-grid visual but should be able to switch from runtime motion to video without parent overrides.

## 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 `Gradient Grid Animation` child when no video source is supplied.
- Do not render both video and runtime animation at the same time when a video source exists.
- Preserve cover behavior with `object-fit: cover`.
- Keep `Gradient Grid Animation` as the source-of-truth visual that can be pre-rendered into video assets.

## Code Paths

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