# Gradient Grid Animation

## Essence

Generic motion visual for a brand gradient, grid selection, focus, and zoom transition.

`Gradient Grid 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, `Gradient Grid Video Animation` wraps this runtime source and renders WebM/MP4 instead.

## Use When

- A use-case needs to suggest a public surface, portfolio grid, selectable cards, or expanding system states.
- The visual should reuse the brand gradient language without making the use-case component project-specific.

## 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`.
- Preserve grid cells as squares in any parent shape.
- Respect reduced-motion preferences.
- Do not couple the animation to homepage layout rules.
- 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/GradientGridAnimation.astro`
- `packages/design-system/src/components/GradientGridVideoAnimation.astro`
- `packages/design-system/src/components/UseCaseCard.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`