| 1 | # Darwin - Motion System (buildable primitives) |
| 2 | |
| 3 | Distilled from a confirmed teardown of monolithstudio.com, wildyriftian.com, donprod.uk, |
| 4 | thirdweb.com, paraform.com. **Key law:** premium feel = ONE signature move + a disciplined easing |
| 5 | dialect, not WebGL everywhere (only 1 of 5 refs used real 3D, pre-baked at 30fps). Restraint wins. |
| 6 | |
| 7 | **Stack:** React (Next.js) + GSAP (ScrollTrigger, Flip, SplitText) + Lenis + React-Three-Fiber. |
| 8 | |
| 9 | ## Easing dialect (use these two everywhere) |
| 10 | ```css |
| 11 | --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* entrances/reveals - GSAP "expo.out" */ |
| 12 | --ease-inout-expo: cubic-bezier(0.87, 0, 0.13, 1); /* symmetric flips - GSAP "power4.inOut"*/ |
| 13 | ``` |
| 14 | |
| 15 | ## Primitives |
| 16 | 1. **lenis-scroll-base** - global. `new Lenis({lerp:0.1, smoothWheel:true})`; drive GSAP: |
| 17 | `lenis.on('scroll', ScrollTrigger.update)`, `gsap.ticker.add(t=>lenis.raf(t*1000))`, |
| 18 | `gsap.ticker.lagSmoothing(0)`. Substrate for every ScrollTrigger primitive. |
| 19 | 2. **fade-rise-stagger** - the universal reveal. `opacity:0→1, y:24→0`, `dur 0.6, ease expo.out, |
| 20 | stagger 0.09`, ScrollTrigger `start:"top 85%", once:true`. Low amplitude. Default for sections. |
| 21 | 3. **mask-reveal-up** - headlines. SplitText by lines, each line in `overflow:hidden`, |
| 22 | `yPercent:110→0`, `dur 0.9, ease expo.out, stagger 0.08`. On-load for hero, ScrollTrigger else. |
| 23 | 4. **clip-wipe-reveal** - images/feature blocks. `clip-path: inset(50%)→inset(0)`, `dur 1.0-1.4, |
| 24 | ease expo.out`. Center-out for hero, directional for sequences. |
| 25 | 5. **evolving-organism** (THE SIGNATURE) - R3F. Hero creature whose cells = real data sources. |
| 26 | - Load: speck → cluster → organism, ~1.2s expo.out (generative self-assembly). |
| 27 | - Scroll: ScrollTrigger `pin:true, scrub:1` over ~150vh maps progress → growth/specialization. |
| 28 | - Focus ask-field: organism collapses inward → folds into the cursor/input. |
| 29 | - Ask: synapses fire along queried engine-paths; answer assembles from glowing trails. |
| 30 | - Health=anatomy: fresh source → bioluminescent/animated; stale → limb greys + withers. |
| 31 | - **Perf:** realtime R3F with HDRI envMap is fine; a pre-baked image-sequence/`<video>` scrubbed |
| 32 | by ScrollTrigger is the faithful cheaper fallback (Monolith did this; 3060 is currently down so |
| 33 | DO NOT hard-depend on GPU compute - bake or run light). |
| 34 | 6. **magnetic-hover** - CTAs/nav. within radius `gsap.to(el,{x:dx*0.3,y:dy*0.3,dur:0.4,ease:"power3.out"})`, |
| 35 | reset on leave with `back.out(1.5)`. Pair with an arrow that nudges. |
| 36 | 7. **invert-cursor** - custom cursor div, `mix-blend-mode:difference`, white fill, lerp follow 0.15; |
| 37 | swap a label ("ask"/"open") + scale on hoverable targets. |
| 38 | 8. **gradient-aurora** - large absolute blob, stacked radial gradients, `filter:blur(120px)`. For |
| 39 | perf, **bake to a static gradient image** (thirdweb #703) instead of runtime blur. Accent word: |
| 40 | `bg-clip-text text-transparent`. |
| 41 | 9. **logo-marquee / source-marquee** - infinite `translateX` on a duplicated track, edge |
| 42 | `mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)`. Use for the live |
| 43 | "sources feeding Darwin" strip. Slow on hover. |
| 44 | |
| 45 | ## Build order (80% of perceived polish, fast) |
| 46 | `lenis-scroll-base` → `fade-rise-stagger` → `mask-reveal-up` → `evolving-organism` (signature) → |
| 47 | `magnetic-hover`. The easeOutExpo dialect + low-amplitude restraint do the rest. |
| 48 | |
| 49 | ## Palette / type |
| 50 | - Canvas near-black `#050607`. One bioluminescent accent (deep-sea teal) `~#16e0c8`, used sparingly. |
| 51 | - Brutalist monolithic display type holding the corners; editorial whitespace. |
| 52 | - Tension between cold brutalist geometry and a warm living organism = the signature aesthetic. |
| 53 | - Reference images live in `/shared/projects/Claud-Design-Revamp/` - study before building. |