# Debug Square Animation

## Essence

Temporary fallback visual for missing use-case artwork.

`Debug Square Animation` is a child component of `Use Case Item`. It uses the debug color intentionally so unresolved visual work stays visible instead of pretending to be finished.

When a pre-rendered loop is available, `Debug Square Video Animation` wraps this runtime source and renders WebM/MP4 instead.

## Use When

- A use-case needs a temporary visual while the real visual direction is still being designed.
- The system needs an obvious placeholder animation in a use-case hero tile.

## Internal Rules

- Keep the component name generic.
- Use only as a temporary visual child for `Use Case Item` / `Use Case Card` gallery presentation.
- Use debug background intentionally.
- The square rotates and pulses in the middle.
- Stay parent-container agnostic: do not assume a fixed aspect ratio from `Use Case Item`.
- Preserve the square as a square in any parent shape.
- Respect reduced-motion preferences.
- Replace with a real visual component once the use-case has a designed direction.
- Do not delete this runtime source when adding video loops; video wrappers should keep it as the source/fallback child.

## Code Paths

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