{
  "slug": "uicomponents",
  "brand": "UIComponents",
  "direction": "Every interaction has a state",
  "style": "assemble",
  "introSeconds": 2.74,
  "loopSeconds": 4.44,
  "loaderSeconds": 1.46,
  "loaderCanvas": [
    200,
    200
  ],
  "motionMetaphor": "Rest, active and focused states assemble into one coherent interaction pattern.",
  "loaderMetaphor": "A focus ring moves between three interface states.",
  "motif": "interface-state-joinery",
  "motifGeometrySha256": "d188601a6a1d0bc40d91722cdeda1c95e3aef92d558d43d5b2c24a4a1d93c335",
  "exactLogoGeometry": true,
  "reducedMotion": "static",
  "sourceLogoSha256": "3fc26e2623813f952f85231481ec8f9fe346abc74362159673ccbb2add84c38d",
  "sourceMarkSha256": "7a7ceca0b4d4fdd46f56d9d62f1a23a55968aa8ce3e77febdda55fa335ddd42b",
  "files": [
    "static-mark.png",
    "motif-static.svg",
    "MOTION.md",
    "loader.css",
    "animated-logo-loop.svg",
    "loader.html",
    "loader.svg",
    "BrandLoader.tsx",
    "animated-symbol.svg",
    "static-loader.svg",
    "animated-symbol.webp",
    "animated-logo.svg"
  ],
  "animatedRaster": {
    "file": "animated-symbol.webp",
    "width": 512,
    "height": 512,
    "nominalFps": 16,
    "sourceFrames": 23,
    "encodedFrames": 23,
    "decodedDurationMs": 1449,
    "seconds": 1.449,
    "transparentOuterCanvas": true,
    "loop": 0,
    "lossless": true,
    "direction": "Every interaction has a state",
    "style": "assemble",
    "motif": "interface-state-joinery",
    "source": "mark.svg",
    "sourceSha256": "7a7ceca0b4d4fdd46f56d9d62f1a23a55968aa8ce3e77febdda55fa335ddd42b",
    "transform": "Deterministic raster samples of the concept-specific SVG motif keyframes; selected mark geometry is fixed, with uniform fitting.",
    "reducedMotionFallback": "static-mark.png"
  }
}