---
id: portfolio.ds.scaffolding-video-animation
name: "Scaffolding Video Animation"
type: pattern
status: active
relations: [{"type":"composes","target":"portfolio.ds.scaffolding-animation"}]
sources: ["apps/portfolio-site/src/design-system/docs/scaffolding-video-animation.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/PreRenderedAnimation.astro","packages/design-system/src/components/ProjectVisual.astro","packages/design-system/src/components/ScaffoldingAnimation.astro","packages/design-system/src/components/ScaffoldingVideoAnimation.astro","packages/design-system/src/components/animations/ScaffoldingVideoAnimation.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/scaffolding-video-animation.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/scaffolding-video-animation.astro"]
---
# Scaffolding Video Animation

## Purpose
Responsive pre-rendered presentation wrapper for `Scaffolding Animation`.

The wrapper serves container-appropriate WebM/MP4 loops and an assembled-state poster while retaining the realtime SVG source as its fallback child.

## Contract
- Own mobile `640×360`, tablet `1024×576`, desktop `1920×1080`, and ultra-wide `3840×2160` source sets.
- Render every source at 30 fps from the same 12-second animation timeline.
- Use `PreRendered Animation` for container measurement, source switching, reduced-motion poster behavior, and runtime fallback.
- Keep `Scaffolding Animation` as the direct source/fallback child.
- Parent project components consume this wrapper through `Project Visual`; they do not select media files directly.
- Connector lines render after the packages assemble and disappear before the packages leave.
- Regenerate committed assets with `npm run render:animations -- scaffolding` after source timing or geometry changes.

## Code Paths

- `packages/design-system/src/components/ScaffoldingVideoAnimation.astro`
- `packages/design-system/src/components/animations/ScaffoldingVideoAnimation.astro`
- `packages/design-system/src/components/ScaffoldingAnimation.astro`
- `packages/design-system/src/components/PreRenderedAnimation.astro`
- `packages/design-system/src/components/ProjectVisual.astro`
- `scripts/render-animation-videos.mjs`

## Use

Use when this named Design System contract is required by an approved composition or product surface.

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