---
id: portfolio.ds.sqvl-mesh-video-animation
name: "SQVL Mesh Video Animation"
type: pattern
status: active
relations: [{"type":"composes","target":"portfolio.ds.sqvl-mesh-animation"}]
sources: ["apps/portfolio-site/src/design-system/docs/sqvl-mesh-video-animation.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/PreRenderedAnimation.astro","packages/design-system/src/components/SqvlMeshAnimation.astro","packages/design-system/src/components/SqvlMeshVideoAnimation.astro","packages/design-system/src/components/animations/SqvlMeshVideoAnimation.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/sqvl-mesh-video-animation.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/sqvl-mesh-video-animation.astro"]
---
# SQVL Mesh Video Animation

## Purpose
Responsive pre-rendered video shell for the SQVL mesh animation.

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

## Use
- A project surface needs the SQVL 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 -- sqvl-mesh` pipeline; do not introduce a separate renderer.
- Render `640x360`, `1024x576`, `1920x1080`, and `3840x2160` variants at `30 fps`.
- Keep the loop duration at `28 seconds` so the camera and signal cycles close cleanly.
- Preserve poster-only behavior under reduced motion.

## Current Usage

- SQVL Mesh project visual.
- Design System component preview.

## Code Paths

- `packages/design-system/src/components/SqvlMeshVideoAnimation.astro`
- `packages/design-system/src/components/SqvlMeshAnimation.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.