---
id: portfolio.ds.scaffolding-animation
name: "Scaffolding Animation"
type: pattern
status: active
relations: []
sources: ["apps/portfolio-site/src/design-system/docs/scaffolding-animation.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/ProjectCard.astro","packages/design-system/src/components/ProjectHeader.astro","packages/design-system/src/components/ProjectItem.astro","packages/design-system/src/components/ScaffoldingAnimation.astro","packages/design-system/src/components/ScaffoldingVideoAnimation.astro","packages/design-system/src/components/animations/ScaffoldingAnimation.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/scaffolding-animation.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/scaffolding-animation.astro"]
---
# Scaffolding Animation

## Purpose
Generic realtime SVG visual for reusable packages assembling into a connected project scaffold.

`Scaffolding Animation` describes modular structure, reuse, and project setup. It is not named after Agent Resource and does not contain project copy.

`Scaffolding Video Animation` wraps this source for production use and keeps it as the runtime fallback.

## Use
- A project is about reusable roles, templates, packets, contracts, project setup, or shared operating infrastructure.
- The visual should show independent modules becoming one bounded system.

## Contract
- Keep this implementation as the canonical realtime SVG source under `Scaffolding Video Animation`.
- Keep all geometry, motion, colors, and reduced-motion behavior inside this component.
- Parent components select its video wrapper only through the public `visualKey="scaffolding"` contract.
- Do not add parent-specific style overrides for cards, headers, heroes, or related-project grids.
- Use abstract packages and structural connections without project names, labels, or body copy.
- Show modules entering from different directions and resolving into a shared scaffold.
- Preserve clear visible connections between packages; avoid disconnected decorative motion.
- Fill the parent crop through SVG `slice` behavior and remain usable at mobile, tablet, desktop, and ultra-wide dimensions.
- Respect `prefers-reduced-motion` by showing the complete static scaffold and hiding moving flow dots.

## Current Usage

- Agent Resource project cards.
- Agent Resource project header.
- Design System component preview.

## Code Paths

- `packages/design-system/src/components/ScaffoldingAnimation.astro`
- `packages/design-system/src/components/animations/ScaffoldingAnimation.astro`
- `packages/design-system/src/components/ScaffoldingVideoAnimation.astro`
- `packages/design-system/src/components/ProjectItem.astro`
- `packages/design-system/src/components/ProjectCard.astro`
- `packages/design-system/src/components/ProjectHeader.astro`

## 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.