---
id: portfolio.ds.sqvl-mesh-animation-scene-setup
name: "SQVL Mesh Animation Scene Setup"
type: pattern
status: active
relations: []
sources: ["apps/portfolio-site/src/design-system/docs/sqvl-mesh-animation-scene-setup.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/SqvlMeshAnimationSceneSetup.astro","packages/design-system/src/components/animations/SqvlMeshAnimationSceneSetup.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/sqvl-mesh-animation-scene-setup.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/sqvl-mesh-animation-scene-setup.astro"]
---
# SQVL Mesh Animation Scene Setup

## Purpose
Canonical realtime SVG construction view for the complete SQVL scene.

`SQVL Mesh Animation Scene Setup` lays out the entire left-to-right communication scene, including radios, phones, internet routing, mesh routing, intentionally empty sectors, debug guides, and the shared timing trigger.

## Use
- Building or inspecting the complete SQVL scene before final framing.
- Adjusting device geometry, channels, nodes, or timing relationships.
- Verifying that every scene element shares one coordinate system and timeline.

## Contract
- Keep this implementation as the canonical realtime SVG scene source.
- Keep radio input, local transcription, internet routing, and mesh routing visible as one continuous system.
- Use blue for voice and local processing, green for internet transport, amber for mesh transport, and red for offline status.
- Keep the debug square as the shared timing trigger while the scene is under construction.
- Keep final camera and viewport-specific framing out of this component.
- Do not use this archived setup directly on project surfaces.
- Respect `prefers-reduced-motion`.

## Current Usage

- Direct child of `SQVL Mesh Animation Draft`.
- Design System scene-construction preview.

## Code Paths

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