cesnimda
51 lines
3.4 KiB
Markdown
51 lines
3.4 KiB
Markdown
# 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.
|