# SquadBatch / A place in the cohort

Cohort management should make belonging and coordinated group progress visible.

Logo animation: Squad pods gather around a shared learning centre and a guide path connects them. Intro 2.74s; logo loop 4.44s.
Loader: A guide point visits three squad pods around the learning table. A 1.46s indeterminate cycle, never a percentage.

This kit uses the saved existing identity. The canonical logo geometry,
colour and lettering are preserved. Non-destructive masks and uniform transforms
reveal the artwork. Supporting geometry is specific to the brand concept and
is not a replacement logo. See `../identity-direction.json` for the complete grammar.

## Files

- `animated-logo.svg`: introduction with a clean final hold.
- `animated-logo-loop.svg`: repeat with an extended visible hold.
- `loader.svg`: 200 x 200 concept-specific loader.
- `static-loader.svg`: same composition without animation.
- `animated-symbol.svg` and `.webp`: concept-led symbol motion.
- `BrandLoader.tsx`, `loader.css`: React and framework-neutral integration.
- `loader.html`: interactive pause/replay/completion preview.
- `static-mark.png`: exact selected symbol fallback.

## Integration

```tsx
<BrandLoader loading={isLoading} fullscreen={true} logoSrc="/brand/mark.svg" label="Loading SquadBatch" />
```

`fullscreen` defaults to true and uses a fixed 100svh, safe-area-aware overlay.
Use false for inline content. Copy the supporting font files with their licences
or load the assigned family through your application's typography system.
Host the selected exact mark at the URL passed through `logoSrc`.
The decorative SVG is bundled in the component, not fetched from an external service.

Set loading to false when the real request settles. Do not gate navigation behind
decorative intros. Reduced-motion preference disables SVG/CSS movement. For the
animated WebP choose `static-mark.png` with a prefers-reduced-motion source/media
rule; bitmap animations cannot read CSS themselves. Provide a pause control for
continuous decorative loops. The preview demonstrates this.

Website source and public deployment are unchanged by this design handoff.