docs: establish approved Phase 1 design + Phase 2 spec as project foundation

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-03 21:07:25 +02:00
commit 1f695d3932
39 changed files with 2686 additions and 0 deletions
@@ -0,0 +1,50 @@
+# 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.