@birdapi/velinstyle 1.2.2 → 1.3.0

package/core/attributes/registry.js

@@ -240,7 +240,7 @@ function registerBuiltins() {
     },
   });
 
-  for (const motion of ['velin-reveal', 'velin-fade', 'velin-slide', 'velin-scale', 'velin-parallax', 'velin-hover', 'velin-stagger', 'velin-scroll']) {
+  for (const motion of ['velin-motion', 'velin-trigger', 'velin-duration', 'velin-delay', 'velin-ease', 'velin-timeline', 'velin-motion-sequence', 'velin-reveal', 'velin-fade', 'velin-slide', 'velin-scale', 'velin-parallax', 'velin-hover', 'velin-stagger', 'velin-scroll']) {
     registerAttribute(motion, { enhance() {} });
   }
 }

package/core/motion/analyze.js

@@ -0,0 +1,38 @@
+import { scanMotionHtml, doctorMotionHtml, collectMotionElements } from './scan.js';
+
+/**
+ * Aggregate metrics for `velinstyle motion analyze`.
+ * @param {string} html
+ */
+export function analyzeMotionHtml(html) {
+  const { elements } = collectMotionElements(html);
+  const scan = scanMotionHtml(html);
+  const durations = elements.map((e) => e.duration).filter((d) => d > 0);
+  const sum = durations.reduce((a, b) => a + b, 0);
+  const avg = durations.length ? Math.round(sum / durations.length) : 0;
+  const longest = durations.length ? Math.max(...durations) : 0;
+  const doctor = doctorMotionHtml(html);
+  const reducedPass = !doctor.findings.some((f) => f.code === 'motion.missing-reduced' || f.code === 'motion.excessive-duration');
+
+  let layoutShiftRisk = 'LOW';
+  if (elements.some((e) => e.preset === 'parallax') || scan.summary.infinite > 2) layoutShiftRisk = 'MEDIUM';
+  if (scan.summary.infinite > 5 || longest > 2000) layoutShiftRisk = 'HIGH';
+
+  return {
+    ok: doctor.ok,
+    metrics: {
+      animations: elements.length || scan.summary.classHits,
+      durationMs: sum,
+      durationLabel: `${(sum / 1000).toFixed(1)} s`,
+      averageMs: avg,
+      longestMs: longest,
+      reducedMotion: reducedPass ? 'PASS' : 'FAIL',
+      infinite: scan.summary.infinite,
+      layoutShiftRisk,
+    },
+    summary: scan.summary,
+    findings: doctor.findings,
+  };
+}
+
+export { doctorMotionHtml, scanMotionHtml };

package/core/motion/blueprint.js

@@ -0,0 +1,51 @@
+/**
+ * Emit motion blueprint HTML snippets from registry.
+ */
+import { getBlueprint, getPreset, getTimeline, getPolicy } from './registry.js';
+
+/**
+ * @param {string} kind
+ * @returns {{ ok: boolean, html?: string, error?: string, blueprint?: object }}
+ */
+export function emitMotionBlueprint(kind) {
+  const bp = getBlueprint(kind);
+  if (!bp) {
+    return {
+      ok: false,
+      error: `Unknown motion blueprint "${kind}". Use: landing|dashboard|pricing|portfolio|shop|forum|docs|blog|crm|login`,
+    };
+  }
+  const policy = getPolicy(bp.policy || 'safe');
+  const timeline = bp.timeline ? getTimeline(bp.timeline) : null;
+  const presetBlocks = (bp.presets || [])
+    .map((id) => {
+      const p = getPreset(id);
+      return `  <!-- preset: ${id}${p ? ` — ${p.title}` : ''} -->
+  <div velin-motion="${id === 'heroReveal' ? 'fade' : id}" velin-trigger="visible" class="velin-mb-4">
+    <p class="velin-text-muted">${p?.title || id}</p>
+  </div>`;
+    })
+    .join('\n');
+
+  const timelineBlock = timeline
+    ? `
+<section velin-timeline="${timeline.id}" class="velin-stack velin-gap-3" aria-label="${timeline.title}">
+  ${(timeline.steps || [])
+    .map(
+      (step, i) =>
+        `  <div data-velin-step="${step}" velin-motion="fade" velin-trigger="load" velin-delay="${i * 100}">${step}</div>`,
+    )
+    .join('\n')}
+</section>`
+    : '';
+
+  const html = `<!-- Velin Motion blueprint: ${bp.id} · policy ${policy?.id || 'safe'} -->
+<!-- ${bp.description} -->
+<div data-velin-motion-policy="${policy?.id || 'safe'}" data-velin-reveal-auto>
+${presetBlocks}
+${timelineBlock}
+</div>
+`;
+
+  return { ok: true, html, blueprint: bp };
+}

package/core/motion/composer.js

@@ -0,0 +1,114 @@
+/**
+ * Motion Composer — sequence API (Studio-ready).
+ */
+import { prefersReducedMotion, markVisible } from './effects.js';
+import { resolvePresetId } from './registry.js';
+import { applyEffects } from './effects.js';
+
+/**
+ * @typedef {{ type: 'fade'|'slide'|'wait'|'rotate'|'blur'|'preset', preset?: string, ms?: number, value?: string }} MotionStep
+ */
+
+export function fade(ms = 400) {
+  return { type: 'fade', ms };
+}
+
+export function slide(ms = 500, value = 'up') {
+  return { type: 'slide', ms, value };
+}
+
+export function wait(ms = 200) {
+  return { type: 'wait', ms };
+}
+
+export function rotate(ms = 400) {
+  return { type: 'rotate', ms };
+}
+
+export function blur(ms = 400) {
+  return { type: 'blur', ms };
+}
+
+export function preset(id, ms) {
+  return { type: 'preset', preset: id, ms };
+}
+
+/**
+ * @param {MotionStep[]} steps
+ * @param {{ root?: HTMLElement, target?: HTMLElement }} [ctx]
+ */
+export async function sequence(steps = [], ctx = {}) {
+  const target = ctx.target || ctx.root;
+  const reduced = prefersReducedMotion();
+  const ran = [];
+
+  for (const step of steps) {
+    if (step.type === 'wait') {
+      if (!reduced && step.ms) await delay(step.ms);
+      ran.push(step);
+      continue;
+    }
+    if (target && typeof target.classList?.add === 'function') {
+      if (step.type === 'preset' && step.preset) {
+        const p = resolvePresetId(step.preset);
+        if (p?.cssClass) target.classList.add(...String(p.cssClass).split(/\s+/));
+        applyEffects(target, { [step.preset]: 'true' });
+      } else if (step.type === 'fade') {
+        applyEffects(target, { fade: 'true' });
+      } else if (step.type === 'slide') {
+        applyEffects(target, { slide: step.value || 'up' });
+      } else if (step.type === 'blur') {
+        applyEffects(target, { blur: 'true' });
+      } else if (step.type === 'rotate') {
+        applyEffects(target, { flip: 'true' });
+      }
+      markVisible(target);
+    }
+    if (!reduced && step.ms) await delay(step.ms);
+    ran.push(step);
+  }
+  return { ok: true, ran };
+}
+
+function delay(ms) {
+  return new Promise((resolve) => {
+    if (typeof setTimeout === 'undefined') return resolve();
+    setTimeout(resolve, ms);
+  });
+}
+
+/**
+ * Declarative `<section velin-motion-sequence>` — children play in order.
+ */
+export function enhanceSequences(root) {
+  if (!root?.querySelectorAll) return () => {};
+  const nodes = [...root.querySelectorAll('[velin-motion-sequence]')];
+  for (const section of nodes) {
+    const children = [...section.children];
+    let i = 0;
+    const stepMs = Number(section.getAttribute('velin-sequence-gap') || 120);
+    for (const child of children) {
+      child.classList.add('velin-animate-on-scroll', 'velin-animate-on-scroll--fade');
+      if (prefersReducedMotion()) {
+        markVisible(child);
+      } else if (typeof setTimeout !== 'undefined') {
+        const delayMs = i * stepMs;
+        setTimeout(() => markVisible(child), delayMs);
+      } else {
+        markVisible(child);
+      }
+      i += 1;
+    }
+  }
+  return () => {};
+}
+
+export const Motion = {
+  sequence,
+  fade,
+  slide,
+  wait,
+  rotate,
+  blur,
+  preset,
+};

package/core/motion/data/registry.json

@@ -0,0 +1,352 @@
+{
+  "schema": "velinstyle.motion.registry",
+  "version": 1,
+  "presets": [
+    {
+      "id": "fade",
+      "title": "Fade",
+      "description": "Opacity entrance; layout-safe default reveal.",
+      "kind": "preset",
+      "category": "hero",
+      "tags": ["entrance"],
+      "duration": 400,
+      "fps": "60",
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "stable",
+      "cssClass": "velin-animate-on-scroll--fade",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "slide",
+      "title": "Slide Up",
+      "description": "Slide from below into view.",
+      "kind": "preset",
+      "category": "cards",
+      "tags": ["entrance", "slide"],
+      "duration": 500,
+      "fps": "60",
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "stable",
+      "cssClass": "velin-animate-on-scroll--slide-up",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "slide-down",
+      "title": "Slide Down",
+      "description": "Slide from above into view.",
+      "kind": "preset",
+      "category": "navigation",
+      "tags": ["entrance", "slide"],
+      "duration": 500,
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "stable",
+      "cssClass": "velin-animate-on-scroll--slide-down",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "slide-left",
+      "title": "Slide Left",
+      "description": "Slide from the inline-end.",
+      "kind": "preset",
+      "category": "lists",
+      "tags": ["entrance", "slide"],
+      "duration": 500,
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "stable",
+      "cssClass": "velin-animate-on-scroll--slide-left",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "slide-right",
+      "title": "Slide Right",
+      "description": "Slide from the inline-start.",
+      "kind": "preset",
+      "category": "lists",
+      "tags": ["entrance", "slide"],
+      "duration": 500,
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "stable",
+      "cssClass": "velin-animate-on-scroll--slide-right",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "zoom",
+      "title": "Zoom / Scale",
+      "description": "Scale-in entrance for cards and media.",
+      "kind": "preset",
+      "category": "media",
+      "tags": ["entrance", "scale"],
+      "duration": 450,
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "stable",
+      "cssClass": "velin-animate-on-scroll--scale",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "blur",
+      "title": "Blur In",
+      "description": "Soft fade/blur entrance (maps to fade-in utility).",
+      "kind": "preset",
+      "category": "overlay",
+      "tags": ["entrance"],
+      "duration": 500,
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "beta",
+      "cssClass": "velin-animate-fade-in",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "flip",
+      "title": "Flip / Scale In",
+      "description": "Attention scale-in for emphasis.",
+      "kind": "preset",
+      "category": "feedback",
+      "tags": ["attention"],
+      "duration": 400,
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "beta",
+      "cssClass": "velin-animate-scale-in",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "lift",
+      "title": "Hover Lift",
+      "description": "Subtle lift on hover for interactive cards and buttons.",
+      "kind": "preset",
+      "category": "buttons",
+      "tags": ["hover"],
+      "duration": 200,
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "stable",
+      "cssClass": "velin-animate-hover",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "pulse",
+      "title": "Pulse",
+      "description": "Attention pulse; prefer finite loops under performance policy.",
+      "kind": "preset",
+      "category": "feedback",
+      "tags": ["attention"],
+      "duration": 1000,
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "stable",
+      "cssClass": "velin-animate-pulse",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "shake",
+      "title": "Shake",
+      "description": "Error/attention shake feedback.",
+      "kind": "preset",
+      "category": "forms",
+      "tags": ["attention", "feedback"],
+      "duration": 400,
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "stable",
+      "cssClass": "velin-animate-shake",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "bounce",
+      "title": "Bounce",
+      "description": "Playful bounce entrance or attention.",
+      "kind": "preset",
+      "category": "feedback",
+      "tags": ["attention"],
+      "duration": 600,
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "stable",
+      "cssClass": "velin-animate-bounce",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "shimmer",
+      "title": "Shimmer",
+      "description": "Loading shimmer surface (skeleton companion).",
+      "kind": "preset",
+      "category": "loading",
+      "tags": ["loading"],
+      "duration": 1200,
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "stable",
+      "cssClass": "velin-skeleton",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "heroReveal",
+      "title": "Hero Reveal",
+      "description": "Staggered entrance for hero content; layout-safe; reduced-motion fallback.",
+      "kind": "preset",
+      "category": "hero",
+      "tags": ["entrance", "stagger"],
+      "duration": 600,
+      "fps": "60",
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "stable",
+      "cssClass": "velin-animate-on-scroll--fade",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "parallax",
+      "title": "Parallax",
+      "description": "Scroll-driven parallax shift.",
+      "kind": "preset",
+      "category": "media",
+      "tags": ["scroll"],
+      "duration": 0,
+      "reducedMotion": true,
+      "layoutSafe": false,
+      "status": "stable",
+      "cssClass": "velin-parallax",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "fadeOut",
+      "title": "Fade Out",
+      "description": "Exit fade (planned composition with timelines).",
+      "kind": "preset",
+      "category": "overlay",
+      "tags": ["exit"],
+      "duration": 300,
+      "reducedMotion": true,
+      "layoutSafe": true,
+      "status": "beta",
+      "cssClass": "velin-animate-fade-out",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    }
+  ],
+  "timelines": [
+    {
+      "id": "hero-intro",
+      "title": "Hero Intro",
+      "description": "Title → subtitle → buttons → image",
+      "kind": "timeline",
+      "category": "hero",
+      "steps": ["title", "subtitle", "buttons", "image"],
+      "status": "beta",
+      "compatibility": { "cssOnly": false, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "card-stagger",
+      "title": "Card Stagger",
+      "description": "Sequential card entrance labels.",
+      "kind": "timeline",
+      "category": "cards",
+      "steps": ["card-1", "card-2", "card-3"],
+      "status": "beta",
+      "compatibility": { "cssOnly": false, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    }
+  ],
+  "transitions": [
+    {
+      "id": "cross-fade",
+      "title": "Cross Fade",
+      "description": "Page/view cross-fade (View Transition friendly).",
+      "kind": "transition",
+      "category": "page",
+      "status": "planned",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "modal-enter",
+      "title": "Modal Enter",
+      "description": "Overlay modal entrance transition.",
+      "kind": "transition",
+      "category": "modal",
+      "status": "planned",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "drawer-enter",
+      "title": "Drawer Enter",
+      "description": "Drawer slide transition.",
+      "kind": "transition",
+      "category": "drawer",
+      "status": "planned",
+      "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    }
+  ],
+  "physics": [
+    {
+      "id": "spring",
+      "title": "Spring",
+      "description": "Spring easing token mapping (runtime simulation later).",
+      "kind": "physics",
+      "category": "feedback",
+      "status": "planned",
+      "token": "--velin-ease-spring",
+      "compatibility": { "cssOnly": true, "runtime": false, "webComponents": false, "studio": true, "production": true, "review": true, "cli": true }
+    },
+    {
+      "id": "elastic",
+      "title": "Elastic",
+      "description": "Elastic easing token mapping.",
+      "kind": "physics",
+      "category": "feedback",
+      "status": "planned",
+      "token": "--velin-ease-elastic",
+      "compatibility": { "cssOnly": true, "runtime": false, "webComponents": false, "studio": true, "production": true, "review": true, "cli": true }
+    }
+  ],
+  "composers": [
+    {
+      "id": "sequence",
+      "title": "Sequence Composer",
+      "description": "Ordered fade/wait/slide composition API.",
+      "kind": "composer",
+      "category": "page",
+      "status": "planned",
+      "compatibility": { "cssOnly": false, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true }
+    }
+  ],
+  "triggers": [
+    { "id": "load", "title": "Load", "description": "Start when document/module initializes.", "kind": "trigger", "category": "page", "status": "stable", "compatibility": { "cssOnly": false, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "visible", "title": "Visible", "description": "Start when element enters the viewport (IntersectionObserver).", "kind": "trigger", "category": "page", "status": "stable", "compatibility": { "cssOnly": false, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "hidden", "title": "Hidden", "description": "Fire when element leaves the viewport. (Planned — runtime falls back to visible.)", "kind": "trigger", "category": "page", "status": "planned", "compatibility": { "cssOnly": false, "runtime": false, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "hover", "title": "Hover", "description": "Pointer enter / hover.", "kind": "trigger", "category": "buttons", "status": "stable", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "focus", "title": "Focus", "description": "Keyboard/pointer focus.", "kind": "trigger", "category": "forms", "status": "stable", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "click", "title": "Click", "description": "Pointer activation.", "kind": "trigger", "category": "buttons", "status": "stable", "compatibility": { "cssOnly": false, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "scroll", "title": "Scroll", "description": "Scroll-linked or scroll-progress trigger.", "kind": "trigger", "category": "page", "status": "stable", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "idle", "title": "Idle", "description": "After user idle timeout. (Planned — runtime falls back to visible.)", "kind": "trigger", "category": "feedback", "status": "planned", "compatibility": { "cssOnly": false, "runtime": false, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "media", "title": "Media", "description": "Match media query condition. (Planned — runtime falls back to visible.)", "kind": "trigger", "category": "page", "status": "planned", "compatibility": { "cssOnly": false, "runtime": false, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "container", "title": "Container", "description": "Container query / size trigger. (Planned — runtime falls back to visible.)", "kind": "trigger", "category": "cards", "status": "planned", "compatibility": { "cssOnly": false, "runtime": false, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "theme", "title": "Theme", "description": "Theme change trigger. (Planned — runtime falls back to visible.)", "kind": "trigger", "category": "page", "status": "planned", "compatibility": { "cssOnly": false, "runtime": false, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "custom", "title": "Custom", "description": "Custom event name via velin-trigger-event. (Planned — runtime falls back to visible.)", "kind": "trigger", "category": "page", "status": "planned", "compatibility": { "cssOnly": false, "runtime": false, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } }
+  ],
+  "policies": [
+    { "id": "safe", "title": "Safe", "description": "Default layout-safe motion with capped durations.", "kind": "policy", "category": "page", "status": "stable", "maxDurationMs": 800, "allowInfinite": false, "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "reduced", "title": "Reduced", "description": "Honors prefers-reduced-motion first; shorten or skip decorative motion.", "kind": "policy", "category": "page", "status": "stable", "maxDurationMs": 200, "forceReduced": true, "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "marketing", "title": "Marketing", "description": "Expressive hero motion allowed within caps.", "kind": "policy", "category": "hero", "status": "stable", "maxDurationMs": 1200, "allowInfinite": false, "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "minimal", "title": "Minimal", "description": "Very little motion; feedback only.", "kind": "policy", "category": "page", "status": "stable", "maxDurationMs": 300, "allowInfinite": false, "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "accessibility", "title": "Accessibility", "description": "Strict reduced-motion + focus-safe interactions.", "kind": "policy", "category": "page", "status": "stable", "maxDurationMs": 200, "forceReduced": true, "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "performance", "title": "Performance", "description": "FPS-friendly; ban infinite decorative loops.", "kind": "policy", "category": "page", "status": "stable", "maxDurationMs": 600, "allowInfinite": false, "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "disabled", "title": "Disabled", "description": "All motion off.", "kind": "policy", "category": "page", "status": "stable", "disabled": true, "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } }
+  ],
+  "blueprints": [
+    { "id": "landing", "title": "Landing", "description": "Hero reveal + staggered sections + CTA hover.", "kind": "blueprint", "category": "hero", "status": "beta", "presets": ["heroReveal", "fade", "lift"], "timeline": "hero-intro", "policy": "marketing", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "dashboard", "title": "Dashboard", "description": "Minimal card stagger for admin shells.", "kind": "blueprint", "category": "cards", "status": "beta", "presets": ["fade", "slide"], "timeline": "card-stagger", "policy": "minimal", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "pricing", "title": "Pricing", "description": "Pricing cards with stagger and lift.", "kind": "blueprint", "category": "cards", "status": "beta", "presets": ["slide", "lift"], "policy": "marketing", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "portfolio", "title": "Portfolio", "description": "Media zoom + parallax-safe reveals.", "kind": "blueprint", "category": "media", "status": "beta", "presets": ["zoom", "fade"], "policy": "marketing", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "shop", "title": "Shop", "description": "Product cards and feedback pulses.", "kind": "blueprint", "category": "cards", "status": "planned", "presets": ["fade", "lift"], "policy": "safe", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "forum", "title": "Forum", "description": "List slides and form feedback.", "kind": "blueprint", "category": "lists", "status": "planned", "presets": ["slide", "shake"], "policy": "safe", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "docs", "title": "Docs", "description": "Minimal fade for documentation pages.", "kind": "blueprint", "category": "page", "status": "beta", "presets": ["fade"], "policy": "minimal", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "blog", "title": "Blog", "description": "Article hero fade and card slides.", "kind": "blueprint", "category": "hero", "status": "planned", "presets": ["fade", "slide"], "policy": "safe", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "crm", "title": "CRM", "description": "Table-safe minimal motion.", "kind": "blueprint", "category": "tables", "status": "planned", "presets": ["fade"], "policy": "performance", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } },
+    { "id": "login", "title": "Login", "description": "Form feedback and focus-safe motion.", "kind": "blueprint", "category": "forms", "status": "beta", "presets": ["fade", "shake"], "policy": "accessibility", "compatibility": { "cssOnly": true, "runtime": true, "webComponents": true, "studio": true, "production": true, "review": true, "cli": true } }
+  ]
+}

package/core/motion/effects.js

@@ -9,16 +9,24 @@ const EFFECT_MAP = {
   'slide-left': ['velin-animate-on-scroll', 'velin-animate-on-scroll--slide-left'],
   'slide-right': ['velin-animate-on-scroll', 'velin-animate-on-scroll--slide-right'],
   scale: ['velin-animate-on-scroll', 'velin-animate-on-scroll--scale'],
+  zoom: ['velin-animate-on-scroll', 'velin-animate-on-scroll--scale'],
   parallax: ['velin-parallax'],
   'parallax-slow': ['velin-parallax', 'velin-parallax--slow'],
   hover: ['velin-animate-hover'],
   'hover-lift': ['velin-animate-hover'],
+  lift: ['velin-animate-hover'],
   flip: ['velin-animate-scale-in'],
   blur: ['velin-animate-fade-in'],
+  pulse: ['velin-animate-pulse'],
+  shake: ['velin-animate-shake'],
+  bounce: ['velin-animate-bounce'],
+  shimmer: ['velin-skeleton'],
+  heroReveal: ['velin-animate-on-scroll', 'velin-animate-on-scroll--fade'],
+  fadeOut: ['velin-animate-fade-out'],
 };
 
 /**
- * Apply motion effect classes from velin-* attribute values.
+ * Apply motion effect classes from velin-* attribute values or velin-motion preset.
  * @param {HTMLElement} el
  * @param {Record<string, string>} attrs keyed by effect name
  */
@@ -26,6 +34,12 @@ export function applyEffects(el, attrs = {}) {
   const classes = new Set();
   for (const [name, value] of Object.entries(attrs)) {
     if (value === 'false' || value === 'off') continue;
+    if (name === 'motion' && value && value !== 'true') {
+      const presetKey = value;
+      const mapped = EFFECT_MAP[presetKey];
+      if (mapped) mapped.forEach((c) => classes.add(c));
+      continue;
+    }
     const mapped = EFFECT_MAP[name];
     if (mapped) mapped.forEach((c) => classes.add(c));
     if (name === 'slide' && value && value !== 'true' && value !== '') {
@@ -52,3 +66,5 @@ export function prefersReducedMotion() {
     window.matchMedia('(prefers-reduced-motion: reduce)').matches
   );
 }
+
+export { EFFECT_MAP };