# Debug Square Video Animation

## Essence

Pre-renderable video shell for the debug square fallback visual.

`Debug Square Video Animation` lets the Portfolio use a WebM/MP4 loop later while keeping `Debug Square Animation` as the runtime source and fallback child.

## Use When

- A use-case visual is missing and needs the explicit debug fallback.
- A pre-rendered WebM or MP4 loop exists for the debug square fallback.
- `Use Case Card` needs a default visual but should still pass through the same pre-renderable animation layer as real visuals.

## 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 `Debug Square 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 `Debug Square Animation` as the source-of-truth visual that can be pre-rendered into video assets.

## Code Paths

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