feat(motion): Conditional Motion Engine (vl-motion) with CSS if() progressive enhancement

[erikconnect]

Summary

Adds a first version of Velora's Conditional Motion Engine — a declarative vl-motion attribute that selects a motion mode and centrally re-scales the shared motion tokens every preset already reads. Zero JavaScript animation runtime; CSS if() is used strictly as progressive enhancement over a baseline that works everywhere.

vl-motion="standard | subtle | cinematic | still".

Walkthrough

Live comparison of the three modes on the Zero-JS Motion showcase page — cinematic reveals with a larger/slower/blurred entrance, subtle with a shorter/quieter reveal, and still (reduced-motion-safe) appears with no movement. All content renders correctly (no stuck-hidden elements).

vl_motion_engine_demo_fixed.mp4

Conditional Motion Engine section
Three vl-motion modes rendered

What changed

• Tokens (packages/css/src/01-tokens.css): new central engine knobs — --vl-motion-mode, --vl-motion-preference, --vl-motion-speed-scale, --vl-motion-intensity, --vl-motion-depth, --vl-motion-blur, --vl-motion-mode-ease. Neutral defaults (scale 1, offset 0) keep existing motion identical when no mode is set.
• Engine module (packages/css/src/03a-motion-conditions.css, new): baseline [vl-motion="…"] selectors assign the knobs; a @supports (width: if(...)) block re-derives them with CSS if() using media(), style() and supports() (reduced-motion, pointer: coarse, scroll-timeline availability). Includes a prefers-reduced-motion collapse and a still mode that renders the composed resting state with no movement.
• Presets adapt centrally (packages/css/src/03-motion.css): base [vl-effect]/channel duration routes through --vl-motion-speed-scale, easing through --vl-motion-mode-ease; vl-flow-in / vl-reveal-cinematic blur is additive via --vl-motion-blur. All changes preserve prior behavior at neutral defaults; explicit vl-speed/vl-depth still win.
• Bundles: imported in velora.css (after 03b) and motion-core.css in correct cascade order.
• Contract: vl-motion added to the compiler allowlist + value rule (standard|subtle|cinematic|still) in packages/compiler/src/grammar.mjs, to the showcase validator allowlist, and documented in docs/project/CONTRACT.md. Deprecated attributes remain forbidden.
• Showcase (apps/showcase/pages/motion/zero-js-motion.html): a new "Conditional Motion Engine" section with cinematic, subtle, and reduced-motion-safe (still) demos driving the real framework grammar (not showcase-local CSS). Demo reveals use vl-range="entry" so scroll-driven entrances complete reliably near the page bottom.
• Docs: new Conditional Motion page (apps/docs/src/pages/motion-conditions.astro) + sidebar link, explaining the engine, if() as progressive enhancement, and the no-if() fallback.

Validation

• pnpm verify:contract — CSS sync OK, contract passed for 49 pages (2713 vl-* attrs), motion compiler 0 issues.
• pnpm build — full Turborepo build passes (Vite + Astro process the if() CSS without error; docs now 10 pages).
• pnpm --filter @velora/compiler test (8/8) and pnpm --filter showcase test:library (10/10).
• Manual browser test (video above): three modes render and animate as designed; existing motion still works; no hidden/stuck content.

Acceptance criteria

• Existing motion still works (neutral defaults). ✅
• No JavaScript animation runtime introduced. ✅
• vl-motion works declaratively. ✅
• CSS if() used only as progressive enhancement, with a working fallback. ✅
• Reduced motion respected (engine collapse + global disable + still). ✅
• Build passes. ✅

_{To show artifacts inline, enable in settings.}

  

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
velora-showcase	Ready	Preview	Aug 24, 2026 8:11pm