# Modular Geometry Animation

## Essence

Generic motion visual for modular geometry, tokens, components, and layout fragments.

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

## Use When

- A use-case needs to suggest design systems, component composition, token structure, or reusable UI pieces.
- The visual should communicate modularity without relying on literal screenshots.

## 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 circles, squares, and modular geometry proportions in any parent shape.
- Respect reduced-motion preferences.
- Do not encode a concrete product name or page title inside the animation.
- 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/ModularGeometryAnimation.astro`
- `packages/design-system/src/components/ModularGeometryVideoAnimation.astro`
- `packages/design-system/src/components/UseCaseCard.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`