# Use Case Item

## Essence

Reusable visual tile component for use-case blocks.

`Use Case Item` renders exactly one use-case tile and exposes the two visual states used by use-case block compositions: `big` and `small`. It also selects one visual animation; the default goes through `Debug Square Video Animation`, which falls back to `Debug Square Animation`.

## Hook

Use inside use-case blocks when one use-case needs to appear as a visual tile.

## Internal Rules

- Belongs under Components as the reusable visual use-case tile.
- Renders one use-case only.
- Supports `state="big"` and `state="small"`.
- Supports `animation`, with `debug-square` as the default.
- Preserves `useCase.visualKey` when real content supplies it.
- Uses default `animation` when the use-case has no explicit visual metadata.
- Must not infer animation from title, href, slug, or other content strings; missing visual metadata means `Debug Square Animation`.
- The component preview exposes `state` only and renders the default animation; do not preview this component as a matrix of internal animation variants.
- `big` is used for featured/crown use-cases.
- `small` is used for compact related or secondary use-cases.
- Uses `Use Case Card` internally with the `gallery` variant.
- Inherits the gallery tile affordance from `Use Case Card`: a white diagonal arrow below the summary.
- Inherits `--shadow-crisp-black` on gallery title, summary, and arrow from `Use Case Card`.
- Owns the visual-animation child family used by gallery use-case tiles.
- Animation children use generic component names, not project or use-case names.
- Owns the rounded tile shape and clips the internal card to that radius.
- Does not define its own width or height; it fills the grid cell assigned by `Use Case Hero`.
- Standalone Design System preview must provide a parent preview cell with explicit height; do not add intrinsic height back into `Use Case Item` to fix preview visibility.
- Use-case parent blocks must consume this component instead of passing use-cases directly into `Use Case Card`.
- Parent components must consume `Use Case Item` through documented public props only; they must not override its internal animation, card styling, spacing, or visual child selection.
- Does not own the surrounding grid, section order, or homepage placement.

## Use When

- Building or reviewing `Use Case Hero`.
- Building or reviewing `Related Use Cases`.
- A single use-case tile needs to switch between featured and compact presentation.

## Do Not Use When

- Rendering regular non-visual use-case cards; use `Use Case Card`.
- Rendering the full use-cases index page; use `Use Cases Index Page`.
- Rendering a single use-case detail page; use `Use Case Page`.

## Props

| Prop | Values | Purpose |
| --- | --- | --- |
| `useCase` | object | Use-case card data passed to `Use Case Card`. |
| `state` | `big`, `small` | Selects crown-tile or lower-row tile presentation. |
| `animation` | `debug-square`, `network-path`, `script-scroll`, `modular-geometry`, `gradient-grid` | Selects the visual animation when `useCase.visualKey` is not set. |

## Related Components And Patterns

- `Use Case Hero`: approved parent block.
- `Related Use Cases Content`: approved parent block.
- `Use Case Card`: internal gallery card renderer.
- `Debug Square Video Animation`: default pre-renderable shell; owns `Debug Square Animation` as its source/fallback child.
- `Network Path Video Animation`: pre-renderable shell; owns `Network Path Animation` as its source/fallback child.
- `Script Scroll Video Animation`: pre-renderable shell; owns `Script Scroll Animation` as its source/fallback child.
- `Modular Geometry Video Animation`: pre-renderable shell; owns `Modular Geometry Animation` as its source/fallback child.
- `Gradient Grid Video Animation`: pre-renderable shell; owns `Gradient Grid Animation` as its source/fallback child.
- `Home Page`: page composition that uses `Use Case Hero`.

## Code Paths

- `packages/design-system/src/components/UseCaseItem.astro`
- `packages/design-system/src/components/DebugSquareVideoAnimation.astro`
- `packages/design-system/src/components/DebugSquareAnimation.astro`
- `packages/design-system/src/components/NetworkPathVideoAnimation.astro`
- `packages/design-system/src/components/NetworkPathAnimation.astro`
- `packages/design-system/src/components/ScriptScrollVideoAnimation.astro`
- `packages/design-system/src/components/ScriptScrollAnimation.astro`
- `packages/design-system/src/components/ModularGeometryVideoAnimation.astro`
- `packages/design-system/src/components/ModularGeometryAnimation.astro`
- `packages/design-system/src/components/GradientGridVideoAnimation.astro`
- `packages/design-system/src/components/GradientGridAnimation.astro`
- `packages/design-system/src/components/UseCaseHero.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`