---
id: portfolio.ds.design-system-animation
name: "Design System Animation"
type: pattern
status: active
relations: []
sources: ["apps/portfolio-site/src/design-system/docs/design-system-animation.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/DesignSystemAnimation.astro","packages/design-system/src/components/DesignSystemVideoAnimation.astro","packages/design-system/src/components/ProjectVisual.astro","packages/design-system/src/components/animations/DesignSystemAnimation.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/design-system-animation.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/design-system-animation.astro"]
---
# Design System Animation

## Purpose
Realtime SVG scene for the Portfolio Design System project. It uses a continuous field of isometric cubes to represent reusable parts forming one coherent system.

The repeated geometry communicates consistency and composability without imitating a particular production page or component library screen.

## Use
- Rendering the Portfolio Design System project card, header, or related-project item.
- A visual needs to communicate modularity, reuse, consistency, and system-level composition.

## Contract
- Keep the visual key `design-system` mapped through `Design System Video Animation`.
- Keep this realtime SVG as the source and runtime fallback for the video wrapper.
- Keep the cube field continuous and edge-to-edge at every crop.
- Keep one accent cube as the visual anchor.
- Use the same animated `--gradient-brand` background as Portfolio Evidence Animation.
- Keep cube faces dark and translucent so the brand gradient remains visible.
- Do not place titles, labels, or project copy inside the SVG.
- Respect `prefers-reduced-motion` by showing the complete static pattern.

## Current Usage

- Design System source component preview.
- Runtime fallback inside `Design System Video Animation`.

## Code Paths

- `packages/design-system/src/components/DesignSystemAnimation.astro`
- `packages/design-system/src/components/DesignSystemVideoAnimation.astro`
- `packages/design-system/src/components/animations/DesignSystemAnimation.astro`
- `packages/design-system/src/components/ProjectVisual.astro`
- `apps/portfolio-site/src/lib/projects.ts`

## Do Not Use

Do not use outside the documented source, composition, or ownership contract without Design System Architect review.

## Accessibility

Preserve applicable accessibility behavior of the implementation and verify changes in actual usage.

## Verification

- Confirm every source path in frontmatter resolves to current implementation or documentation.
- Run `scripts/design-system-graph --check --no-write`.
- Verify actual usage and documented Preview against the enabled package profiles before completion.