# ANIMATION_CONCEPTS.md
Named animation concepts, each mapped to the question it answers. All obey MOTION_GUIDELINES tokens & reduced-motion variants.

---

## A1 · "Trace draw" — hero identity moment
On first paint: a 1.5px accent line draws left→right under the role line (700ms `signature`), steps down 8px mid-way (PCB-trace corner), and terminates in a 4px status dot that blinks once, then stays lit next to `Open to work`.
*Question answered:* "the page is ready — and he's available."
Reduced motion: line + lit dot render complete, static. Repeat visits: draws once per session only.

## A2 · "Section arrive"
Each homepage section reveals on 20% viewport entry: opacity 0→1 + 12px rise (400ms), heading first, content children staggered 60ms (max 3 groups). Fires once per page load.
*Question:* "what's new in view?" — creates reading rhythm without withholding content (text is present for search/reader modes regardless).

## A3 · "Card focus"
Project cards on hover/focus-visible: border → `border-strong`, screenshot shifts up 4px (240ms), title gains accent underline draw (160ms), `Read case study →` arrow nudges 4px right.
*Question:* "is this clickable, and what happens?"

## A4 · "Chip pulse"
The `ACTIVE` status dot pulses twice (scale 1→1.4 opacity fade) when its chip first enters viewport, then rests lit. Amber `IN DEVELOPMENT` dots never pulse (calm hierarchy: live > in-progress).
*Question:* "which of these is running right now?"

## A5 · "Diagram flow" (case-study architecture, desktop only)
Architecture diagrams are static SVGs; hovering a node highlights its connected edges in accent (160ms) and dims unrelated nodes to 60%. No autoplay, no looping data-packet animations.
*Question:* "what talks to what?"
Mobile/touch + reduced motion: full static diagram, always fully legible without interaction.

## A6 · "Theme morph"
Sun⇄moon icon path-morph (160ms) + global 240ms token cross-fade. The hero trace re-tints without redrawing.

## A7 · "Language cross-fade"
On EN⇄NO switch: text nodes fade out 80ms / in 160ms; layout containers keep dimensions during swap (pre-measured against longer NO strings) so nothing jumps. The switch control itself slides its active-segment thumb (160ms).
*Question:* "same page, other language — nothing lost."

## A8 · "Timeline grow"
Experience timeline's vertical hairline draws downward as the section enters (400ms); period dots fade in with their rows.
*Question:* "read this top-down, newest first."

## A9 · "Form confirm"
On successful submit, the form panel cross-fades to a confirmation card: accent check icon draws (240ms stroke), message + "I usually reply within a day" (`Jeg svarer vanligvis innen en dag`).
*Question:* "did it actually send?" — the current site's broken-looking send feedback (raw � glyphs) is exactly what this replaces.

## A10 · "404 fray"
The trace motif runs, stutters, and frays into dots at the break point; mono caption `route not found — no such page` / `fant ikke siden`. Static in reduced motion.
*Purpose:* the one place allowed personality-forward motion — errors are where craft shows.

---

### Explicitly rejected concepts (documented so Phase 3 doesn't re-invent them)
Typewriter hero text (junior tell) · particle backgrounds · 3D tilt cards · scroll-pinned storytelling · animated skill counters · magnetic buttons (see CURSOR_INTERACTIONS) · autoplaying screenshot carousels.