{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "motion",
  "type": "registry:ui",
  "title": "Motion (MIAN)",
  "description": "A small motion system: three durations, three curves, the noodle’s own entrance for anything you add, staggered lists, press and lift feedback, drawn lines, counted numbers and cross-faded changes. All of it stops under reduced motion.",
  "categories": [
    "layout & utilities",
    "motion",
    "animation",
    "transition",
    "easing"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/motion.css",
      "type": "registry:file",
      "target": "mian/components/motion.css",
      "content": ".mn-enter { animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter) both; }\n.mn-stagger > * { animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter) both; animation-delay: calc(var(--mn-stagger-step, 45ms) * var(--i, 8)); }\n.mn-stagger > :nth-child(1) { --i: 0; } .mn-stagger > :nth-child(2) { --i: 1; } .mn-stagger > :nth-child(3) { --i: 2; } .mn-stagger > :nth-child(4) { --i: 3; }\n.mn-stagger > :nth-child(5) { --i: 4; } .mn-stagger > :nth-child(6) { --i: 5; } .mn-stagger > :nth-child(7) { --i: 6; } .mn-stagger > :nth-child(8) { --i: 7; }\n.mn-press { transition: scale var(--mn-dur-fast) var(--mn-ease-out); }\n.mn-press:active { scale: .97; }\n@media (hover: hover) {\n  .mn-lift { transition: translate var(--mn-dur) var(--mn-ease-out), box-shadow var(--mn-dur) var(--mn-ease-out); }\n  .mn-lift:hover { translate: 0 -2px; box-shadow: var(--mn-shadow-md); }\n}\n.mn-draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: mn-draw var(--mn-dur-draw, 900ms) var(--mn-ease-out) both; }\n@keyframes mn-draw { from { stroke-dashoffset: 1; } }\n@keyframes mn-vt-out { to { opacity: 0; } }\n@keyframes mn-vt-in { from { opacity: 0; } }\nhtml.mn-vt::view-transition-old(root) { animation: mn-vt-out 140ms var(--mn-ease-out) both; }\nhtml.mn-vt::view-transition-new(root) { animation: mn-vt-in 240ms var(--mn-ease-out) both; }\n@media (prefers-reduced-motion: reduce) {\n  .mn-enter, .mn-stagger > *, .mn-draw { animation: none; }\n  .mn-press, .mn-lift { transition: none; }\n  .mn-press:active { scale: none; } .mn-lift:hover { translate: none; }\n}\n}\n@layer mian.components {"
    },
    {
      "path": "mian/examples/motion.html",
      "type": "registry:file",
      "target": "mian/examples/motion.html",
      "content": "<!-- Entrance and stagger -->\n<div class=\"mn-stack\" style=\"width:min(100%,22rem)\">\n  <ul class=\"mn-list mn-stagger\" id=\"motion-list\"><li>Invoice sent</li><li>Reminder scheduled</li><li>Payment received</li><li>Receipt emailed</li></ul>\n  <button class=\"mn-btn mn-btn-outline mn-press\" type=\"button\" onclick=\"const l=document.getElementById('motion-list');const c=l.cloneNode(true);l.replaceWith(c)\">Play again</button>\n</div>\n\n<!-- Press, lift and count -->\n<div class=\"mn-row\" style=\"--mn-gap:1rem\">\n  <a class=\"mn-card mn-lift\" href=\"#\" style=\"display:block;padding:1rem 1.25rem;text-decoration:none;color:inherit\"><span class=\"mn-muted\" style=\"font-size:.8125rem\">Orders today</span><br><strong style=\"font-size:1.5rem\" data-mn-count>1,284</strong></a>\n  <button class=\"mn-btn mn-press\" type=\"button\">Press me</button>\n</div>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/motion",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "--mn-dur-fast · --mn-dur · --mn-dur-slow",
        "--mn-ease-out · --mn-ease-in-out · --mn-ease-spring",
        "mn-enter",
        "mn-stagger",
        "mn-press",
        "mn-lift",
        "mn-draw",
        "data-mn-count",
        "Mian.transition(fn)"
      ],
      "accessibility": [
        "Everything here is disabled by prefers-reduced-motion: reduce; nothing depends on an animation finishing.",
        "Animate to explain a change (something arrived, moved, was pressed), not to decorate. Do not fade sections in as the reader scrolls.",
        "Keep motion under 400 ms and never loop it near text.",
        "Counted numbers keep their final value in the DOM, so assistive technology never reads a partial count."
      ],
      "intents": [
        "animation",
        "entrance animation",
        "staggered list",
        "hover lift",
        "count up number",
        "page transition",
        "micro interactions"
      ]
    }
  }
}