Motion
Motion confirms and orients; it never performs. The site should feel fast because it is fast, and the small amount of animation that exists should make it feel engineered.
| Token | Value | Used for |
|---|---|---|
dur-fast · 150ms | ease-out | Hover, focus, button and link states |
dur-base · 250ms | ease-out | Card lifts, dropdowns, accordions |
dur-slow · 450ms | ease-out | Scroll-triggered reveals (opacity + 24px rise) |
dur-page · 700ms | ease-in-out | Hero entrance sequence, once per visit |
ease-out | cubic-bezier(.22,.7,.24,1) | The default easing for everything |
The immersive tier (Strata experiences)
Standard pages run on the base motion tier above. A second, heavier tier exists for surfaces where the brand itself is the experience: the homepage in campaign mode, launches and event screens. It was specified and proven on the approved homepage exploration, and these are its rules.
| Rule | Specification |
|---|---|
| When allowed | Campaign and launch surfaces only. Inner pages, service pages and content pages never carry WebGL or scroll pinning. |
| Libraries | GSAP + ScrollTrigger for choreography, Three.js for the Strata terrain, loaded deferred from CDN. No other animation libraries enter the stack. |
| WebGL budget | Pixel ratio capped at 1.75; scene paused when the tab is hidden or the hero has scrolled past; WebGL disabled under 720px viewport width and under prefers-reduced-motion. |
| Light surfaces | Day-surface terrain must be re-lit, not recoloured: fog starts beyond the camera’s near field (~24 units), the wireframe runs in brand navy at 0.5 opacity or above over a solid one step darker than the page, hot facets use normal rather than additive blending, and no white veil may wash over the scene. Dark-tier values collapse to invisible on light. |
| Fallback ladder | Three tiers, always present: WebGL terrain → the Frozen Frame still (or lightweight ridgelines where image weight is prohibitive) → fully readable page with no JavaScript at all. |
| Pinned storytelling | Maximum one pinned narrative sequence per page, pin distance around 160% viewport. Crossfades overlap so a statement is always readable mid-scroll. A low-contrast motif backdrop keeps the stage from reading empty: on the system homepage it is the Convergence, whose strands draw one per statement and merge into a single line on the resolution, doubling as the progress indicator; campaign (Strata) pages keep ridgelines with the lit-triangle steps. Pinning disabled on mobile and reduced motion: statements render as a static stack. |
| Scrubbed progress | Scroll-driven progress must be integrated into content geometry, e.g. the connector line through the method’s phase markers. Free-floating full-width bars are banned: they read as page loading. |
| Loading curtain | Immersive tier only. Brand mark plus progress shimmer, lifted on window load and hard-capped at 1.4s, skipped for repeat visits in-session and for reduced motion. Standard pages ship without a curtain. |
| Counters | Number count-ups fire once on entry and only on numbers Triway can evidence. Without JS the final values render immediately. |
Do
- Reveal sections once on scroll, staggered by 100ms, then stop
- Animate transform and opacity only; never layout properties
- Honour prefers-reduced-motion by disabling all non-essential animation
- Pause any ambient canvas work when off-screen or tab-hidden
Don’t
- Auto-play carousels, marquees of testimonials, or typing effects
- Loop attention-seeking animations (pulsing badges, bouncing arrows)
- Animate the logo’s triangles apart or spin the mark
- Add parallax to text content