/** * LEARNature-ly Motion Tokens v1 * Stable URL: https://learnature-ly.com/shared/design-system/motion.v1.css * * Owned by: Motionov agent (AWENI/.claude/agents/motionov.md) * Companion to: tokens.v1.css (which holds the legacy --ln-transition-* / --ln-easing-* tokens) * * SemVer policy (mirrors tokens.v1.css): * v1.X.Y patch — value adjustments (cascade automatically to all consuming apps) * v1.X.0 minor — new token added (apps don't need to change) * v2.0.0 major — BREAKING change (token renamed/removed) → ships at NEW URL * * Three-tier model (W3C Design Tokens 2025.10 + industry pattern): * PRIMITIVE — raw values (--motion-duration-50, --motion-ease-quad) * SEMANTIC — UI concepts (--motion-duration-fast, --motion-ease-standard) * COMPONENT — task-named (--motion-button-press, --motion-modal-enter) — APPS ADD THESE * * Per-surface motion mode: * Set * - productive (default for admin, settings, BalanceTab/SelectO admin) — fast, minimal * - expressive (Lobby, Apps Hub, Marketing) — slower, decelerated, spring-OK * - respectful (Memoriz reader, prayer) — instant transitions, no scale, no rotation * - ludic (Games) — per-game palette, full motion vocabulary * * Reduced-motion strategy: * System level: tokens.v1.css collapses durations to 0.01ms (acceptable for decorative) * Component level: REPLACEMENT, not removal — slide → crossfade, parallax → static * This file's primitives ARE NOT collapsed — components consume them and decide replacement. * * Why this file exists: * tokens.v1.css#170-174 has 3 transition durations + 2 easings — skeletal. * Industry standard (M3, Carbon, Fluent 2) requires 6+ durations, 4+ easings, stagger primitives, * spring presets, choreography rules. This file extends without breaking. * * Read motionov.md for the 12 invariants this file backs. */ :root { /* ==================================================================== * PRIMITIVE — Duration scale (Material 3 / Carbon hybrid) * Numeric scale; 50ms ≈ "instant feedback", 700ms ≈ "cinematic max". * NEVER consume in apps — use semantic tokens below. * ==================================================================== */ --motion-duration-50: 50ms; --motion-duration-100: 100ms; --motion-duration-150: 150ms; --motion-duration-200: 200ms; --motion-duration-250: 250ms; --motion-duration-300: 300ms; --motion-duration-400: 400ms; --motion-duration-500: 500ms; /* hard ceiling for productive UI */ --motion-duration-700: 700ms; /* cinematic only — Lobby hero / marketing */ --motion-duration-loop: 1200ms; /* infinite loops — spinners, shimmer; calmer than productive UI durations */ /* ==================================================================== * PRIMITIVE — Easing curves (cubic-bezier 4-tuples, DTCG-ready) * ==================================================================== */ --motion-ease-linear: linear; --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* in/out */ --motion-ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* enter / out */ --motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* exit / in */ --motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* hero accent */ --motion-ease-anticipate: cubic-bezier(0.4, -0.3, 0.6, 1); /* slight wind-up */ /* ==================================================================== * PRIMITIVE — Spring presets (consumed by motion.ts SPRING_* constants) * Format: "stiffness damping" — JS reads via getComputedStyle and parses. * Apps consume the constants from utils/motion.ts, not the CSS directly. * ==================================================================== */ --motion-spring-gentle: 300 30; --motion-spring-snappy: 450 35; --motion-spring-bouncy: 500 22; --motion-spring-stiff: 700 40; /* ==================================================================== * PRIMITIVE — Stagger / cascade * Carbon Motion: ≤20ms per element ideal, total ≤500ms. * AWENI ux-polish.md uses 60ms for kid-friendly cascades. * ==================================================================== */ --motion-stagger-tight: 20ms; /* dense lists, admin tables */ --motion-stagger-default: 60ms; /* AWENI cards / Game answer options */ --motion-stagger-loose: 100ms; /* hero list reveals (use sparingly) */ --motion-stagger-cap: 500ms; /* hard cap for total cascade duration */ /* ==================================================================== * PRIMITIVE — Spatial scale (translation distance for motion) * In rem so it scales with text-size preferences. * ==================================================================== */ --motion-distance-xs: 0.25rem; /* 4px — micro nudge */ --motion-distance-sm: 0.5rem; /* 8px — productive feedback */ --motion-distance-md: 1rem; /* 16px — standard enter */ --motion-distance-lg: 1.5rem; /* 24px — hero entries */ --motion-distance-xl: 3rem; /* 48px — cinematic — use sparingly, watch vestibular */ /* ==================================================================== * SEMANTIC — UI motion intents (consumed by app CSS / motion.ts) * Default = PRODUCTIVE mode (the safe default). * Per-surface modes override below via [data-motion="..."] selectors. * ==================================================================== */ --motion-duration-instant: var(--motion-duration-50); --motion-duration-fast: var(--motion-duration-150); /* hover, focus, micro */ --motion-duration-base: var(--motion-duration-200); /* standard transition */ --motion-duration-slow: var(--motion-duration-300); /* enter / reveal */ --motion-duration-deliberate: var(--motion-duration-500); /* cinematic ceiling for productive */ --motion-duration-spin: var(--motion-duration-loop); /* spinner / shimmer / any infinite */ --motion-easing-default: var(--motion-ease-standard); --motion-easing-enter: var(--motion-ease-decelerate); --motion-easing-exit: var(--motion-ease-accelerate); --motion-easing-emphasized: var(--motion-ease-emphasized); /* ==================================================================== * SEMANTIC — Per-intent presets (consumed by motion.ts INTENT_DEFAULTS) * Aligns with AWENI/src/utils/motion.ts intent-driven helpers. * ==================================================================== */ --motion-intent-enter-duration: var(--motion-duration-slow); --motion-intent-enter-ease: var(--motion-easing-enter); --motion-intent-exit-duration: var(--motion-duration-fast); --motion-intent-exit-ease: var(--motion-easing-exit); --motion-intent-attention-duration: var(--motion-duration-base); --motion-intent-attention-ease: var(--motion-easing-default); --motion-intent-micro-duration: var(--motion-duration-fast); --motion-intent-micro-ease: var(--motion-easing-default); } /* ====================================================================== * PER-SURFACE MOTION MODES — opt-in via * ====================================================================== */ /* PRODUCTIVE — default; admin surfaces, settings, BalanceTab/SelectO admin */ body[data-motion="productive"] { --motion-duration-base: var(--motion-duration-150); --motion-duration-slow: var(--motion-duration-200); --motion-duration-deliberate: var(--motion-duration-300); } /* EXPRESSIVE — Lobby, Apps Hub, Marketing landing */ body[data-motion="expressive"] { --motion-duration-base: var(--motion-duration-250); --motion-duration-slow: var(--motion-duration-400); --motion-duration-deliberate: var(--motion-duration-700); --motion-easing-default: var(--motion-ease-emphasized); } /* RESPECTFUL — Memoriz reader, prayer module, Yawmi reflection */ /* Religious / contemplative surfaces — instant transitions, no scale, no rotation */ body[data-motion="respectful"] { --motion-duration-instant: var(--motion-duration-50); --motion-duration-fast: var(--motion-duration-100); --motion-duration-base: var(--motion-duration-150); --motion-duration-slow: var(--motion-duration-200); --motion-duration-deliberate: var(--motion-duration-300); --motion-easing-default: var(--motion-ease-linear); /* Spring presets disabled in respectful mode — too playful */ } /* LUDIC — Games surface; per-game polish stays autonomous, but baselines respected */ body[data-motion="ludic"] { --motion-duration-fast: var(--motion-duration-150); --motion-duration-base: var(--motion-duration-250); --motion-duration-slow: var(--motion-duration-400); --motion-stagger-default: var(--motion-stagger-loose); } /* ====================================================================== * BAIL-OUT MODE — auto-applied when device is constrained * Set programmatically via JS: * if (navigator.deviceMemory < 4 || navigator.connection?.saveData) * document.body.dataset.motion = 'reduced'; * ====================================================================== */ body[data-motion="reduced"] { --motion-duration-instant: var(--motion-duration-50); --motion-duration-fast: var(--motion-duration-50); --motion-duration-base: var(--motion-duration-100); --motion-duration-slow: var(--motion-duration-150); --motion-duration-deliberate: var(--motion-duration-200); --motion-easing-default: var(--motion-ease-linear); --motion-stagger-default: var(--motion-stagger-tight); } /* ====================================================================== * PREFERS-REDUCED-MOTION — system-wide a11y override * * Component-level meaning-bearing animations MUST provide explicit replacement * (slide → crossfade, parallax → static) — see motionov.md invariant #3. * This media query handles the *decorative* baseline only. * ====================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --motion-duration-instant: 0.01ms; --motion-duration-fast: 0.01ms; --motion-duration-base: 0.01ms; --motion-duration-slow: 0.01ms; --motion-duration-deliberate: 0.01ms; --motion-stagger-default: 0ms; --motion-stagger-loose: 0ms; } } /* ====================================================================== * BACKWARD COMPATIBILITY — bridge from existing tokens.v1.css aliases * Apps that consume var(--ln-transition-*) keep working; new code uses --motion-*. * The bridge maps old names to new primitives so we can deprecate the old ones * in v2 without breaking apps mid-flight. * ====================================================================== */ :root { /* Old name → new primitive (kept identical to current tokens.v1.css values) */ --ln-transition-fast: var(--motion-duration-fast); --ln-transition-default: var(--motion-duration-base); --ln-transition-slow: var(--motion-duration-slow); --ln-easing-default: var(--motion-ease-standard); --ln-easing-emphasized: var(--motion-ease-emphasized); }