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

## Purpose
Responsive pre-rendered video shell for the Portfolio Evidence animation.

`Portfolio Evidence Video Animation` uses committed WebM and MP4 loops in production while preserving `Portfolio Evidence Animation` as the realtime SVG source and runtime fallback.

## Use
- A project surface needs the Portfolio visual without continuous realtime SVG work.
- The visual is decorative and does not require runtime interaction.
- Responsive pre-rendered assets are available.

## Contract
- Use the shared `PreRenderedAnimation` component and its container-measured source selection.
- Keep WebM first and MP4 second.
- Keep the SVG source dormant while video works and reveal it only if video loading fails.
- Use the shared `npm run render:animations -- portfolio-evidence` pipeline; do not introduce a separate renderer.
- Render `640x360`, `1024x576`, `1920x1080`, and `3840x2160` variants at `30 fps`.
- Keep the loop duration at `24 seconds` so the brand gradient closes cleanly.
- Preserve the same composition scale at every resolution.
- Preserve poster-only behavior under reduced motion.

## Current Usage

- Post-AI Systems project cards.
- Post-AI Systems project header.
- Design System component preview.

## Code Paths

- `packages/design-system/src/components/PortfolioEvidenceVideoAnimation.astro`
- `packages/design-system/src/components/PortfolioEvidenceAnimation.astro`
- `packages/design-system/src/components/PreRenderedAnimation.astro`
- `scripts/render-animation-videos.mjs`

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