cesnimda
3.4 KiB
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.