{
  "name": "floatLoop",
  "version": "1.0.0",
  "purpose": "Gentle, endless floating for decorative elements — continuous looping motion along one axis (compositor-friendly).",
  "output": "css",
  "engine": "native-css",
  "paramSchema": {
    "distance": {
      "type": "string",
      "default": "8px",
      "pattern": "^[0-9]*\\.?[0-9]+(px|rem|%)$"
    },
    "duration": {
      "type": "number",
      "default": 3,
      "min": 1,
      "max": 10
    },
    "axis": {
      "type": "string",
      "default": "y",
      "pattern": "^(x|y)$"
    }
  },
  "triggerDefaults": {},
  "performance": {
    "verified": true,
    "lcpSafe": true,
    "cost": 1,
    "verifiedAt": "2026-06-29"
  },
  "a11y": {
    "reducedMotionFallback": "static",
    "persistent": true
  },
  "template": "{{css target}} { animation: motion-floatLoop-{{css id}} {{css params.duration}}s ease-in-out infinite alternate; }\n@keyframes motion-floatLoop-{{css id}} { from { transform: translate{{css params.axis}}(0) } to { transform: translate{{css params.axis}}(-{{css params.distance}}) } }",
  "demo": {
    "html": "<div class=\"float-box d-floatLoop\" style=\"display:inline-flex;align-items:center;justify-content:center;width:6rem;height:6rem;border:1px solid #8886;border-radius:14px\">FLOAT</div>",
    "params": {
      "distance": "10px",
      "duration": 3,
      "axis": "y"
    }
  }
}