@primer/primitives/dist/docs/base/motion/motion.json

Typography, spacing, and color primitives for Primer design system

{
  "base-duration-0": {
    "key": "{base.duration.0}",
    "filePath": "src/tokens/base/motion/timing.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 0,
        "unit": "ms"
      },
      "$type": "duration",
      "key": "{base.duration.0}"
    },
    "name": "base-duration-0",
    "attributes": {},
    "path": ["base", "duration", "0"],
    "value": {
      "value": 0,
      "unit": "ms"
    },
    "type": "duration"
  },
  "base-duration-100": {
    "key": "{base.duration.100}",
    "filePath": "src/tokens/base/motion/timing.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 100,
        "unit": "ms"
      },
      "$type": "duration",
      "key": "{base.duration.100}"
    },
    "name": "base-duration-100",
    "attributes": {},
    "path": ["base", "duration", "100"],
    "value": {
      "value": 100,
      "unit": "ms"
    },
    "type": "duration"
  },
  "base-duration-1000": {
    "key": "{base.duration.1000}",
    "filePath": "src/tokens/base/motion/timing.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 1000,
        "unit": "ms"
      },
      "$type": "duration",
      "key": "{base.duration.1000}"
    },
    "name": "base-duration-1000",
    "attributes": {},
    "path": ["base", "duration", "1000"],
    "value": {
      "value": 1000,
      "unit": "ms"
    },
    "type": "duration"
  },
  "base-duration-200": {
    "key": "{base.duration.200}",
    "filePath": "src/tokens/base/motion/timing.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 200,
        "unit": "ms"
      },
      "$type": "duration",
      "key": "{base.duration.200}"
    },
    "name": "base-duration-200",
    "attributes": {},
    "path": ["base", "duration", "200"],
    "value": {
      "value": 200,
      "unit": "ms"
    },
    "type": "duration"
  },
  "base-duration-300": {
    "key": "{base.duration.300}",
    "filePath": "src/tokens/base/motion/timing.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 300,
        "unit": "ms"
      },
      "$type": "duration",
      "key": "{base.duration.300}"
    },
    "name": "base-duration-300",
    "attributes": {},
    "path": ["base", "duration", "300"],
    "value": {
      "value": 300,
      "unit": "ms"
    },
    "type": "duration"
  },
  "base-duration-400": {
    "key": "{base.duration.400}",
    "filePath": "src/tokens/base/motion/timing.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 400,
        "unit": "ms"
      },
      "$type": "duration",
      "key": "{base.duration.400}"
    },
    "name": "base-duration-400",
    "attributes": {},
    "path": ["base", "duration", "400"],
    "value": {
      "value": 400,
      "unit": "ms"
    },
    "type": "duration"
  },
  "base-duration-50": {
    "key": "{base.duration.50}",
    "filePath": "src/tokens/base/motion/timing.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 50,
        "unit": "ms"
      },
      "$type": "duration",
      "key": "{base.duration.50}"
    },
    "name": "base-duration-50",
    "attributes": {},
    "path": ["base", "duration", "50"],
    "value": {
      "value": 50,
      "unit": "ms"
    },
    "type": "duration"
  },
  "base-duration-500": {
    "key": "{base.duration.500}",
    "filePath": "src/tokens/base/motion/timing.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 500,
        "unit": "ms"
      },
      "$type": "duration",
      "key": "{base.duration.500}"
    },
    "name": "base-duration-500",
    "attributes": {},
    "path": ["base", "duration", "500"],
    "value": {
      "value": 500,
      "unit": "ms"
    },
    "type": "duration"
  },
  "base-duration-600": {
    "key": "{base.duration.600}",
    "filePath": "src/tokens/base/motion/timing.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 600,
        "unit": "ms"
      },
      "$type": "duration",
      "key": "{base.duration.600}"
    },
    "name": "base-duration-600",
    "attributes": {},
    "path": ["base", "duration", "600"],
    "value": {
      "value": 600,
      "unit": "ms"
    },
    "type": "duration"
  },
  "base-duration-700": {
    "key": "{base.duration.700}",
    "filePath": "src/tokens/base/motion/timing.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 700,
        "unit": "ms"
      },
      "$type": "duration",
      "key": "{base.duration.700}"
    },
    "name": "base-duration-700",
    "attributes": {},
    "path": ["base", "duration", "700"],
    "value": {
      "value": 700,
      "unit": "ms"
    },
    "type": "duration"
  },
  "base-duration-800": {
    "key": "{base.duration.800}",
    "filePath": "src/tokens/base/motion/timing.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 800,
        "unit": "ms"
      },
      "$type": "duration",
      "key": "{base.duration.800}"
    },
    "name": "base-duration-800",
    "attributes": {},
    "path": ["base", "duration", "800"],
    "value": {
      "value": 800,
      "unit": "ms"
    },
    "type": "duration"
  },
  "base-duration-900": {
    "key": "{base.duration.900}",
    "filePath": "src/tokens/base/motion/timing.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 900,
        "unit": "ms"
      },
      "$type": "duration",
      "key": "{base.duration.900}"
    },
    "name": "base-duration-900",
    "attributes": {},
    "path": ["base", "duration", "900"],
    "value": {
      "value": 900,
      "unit": "ms"
    },
    "type": "duration"
  },
  "base-easing-ease": {
    "key": "{base.easing.ease}",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["hover-state", "micro-interaction", "button-hover", "link-hover"],
        "rules": "Use for hover state changes."
      }
    },
    "filePath": "src/tokens/base/motion/easing.json5",
    "isSource": true,
    "original": {
      "$value": [0.25, 0.1, 0.25, 1],
      "$type": "cubicBezier",
      "$description": "CSS default easing. Use for hover state changes and micro-interactions.",
      "$extensions": {
        "org.primer.llm": {
          "usage": ["hover-state", "micro-interaction", "button-hover", "link-hover"],
          "rules": "Use for hover state changes."
        }
      },
      "key": "{base.easing.ease}"
    },
    "name": "base-easing-ease",
    "attributes": {},
    "path": ["base", "easing", "ease"],
    "value": [0.25, 0.1, 0.25, 1],
    "type": "cubicBezier",
    "description": "CSS default easing. Use for hover state changes and micro-interactions."
  },
  "base-easing-easeIn": {
    "key": "{base.easing.easeIn}",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["exit-animation", "element-leaving", "off-screen-motion"],
        "rules": "Rarely used alone. Prefer ease-out for most exit animations."
      }
    },
    "filePath": "src/tokens/base/motion/easing.json5",
    "isSource": true,
    "original": {
      "$value": [0.7, 0.1, 0.75, 0.9],
      "$type": "cubicBezier",
      "$description": "Accelerating motion. Use for elements exiting the viewport (moving off-screen).",
      "$extensions": {
        "org.primer.llm": {
          "usage": ["exit-animation", "element-leaving", "off-screen-motion"],
          "rules": "Rarely used alone. Prefer ease-out for most exit animations."
        }
      },
      "key": "{base.easing.easeIn}"
    },
    "name": "base-easing-easeIn",
    "attributes": {},
    "path": ["base", "easing", "easeIn"],
    "value": [0.7, 0.1, 0.75, 0.9],
    "type": "cubicBezier",
    "description": "Accelerating motion. Use for elements exiting the viewport (moving off-screen)."
  },
  "base-easing-easeInOut": {
    "key": "{base.easing.easeInOut}",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["position-change", "size-change", "morph-animation", "expand-collapse", "slide-transition"],
        "rules": "Use if an element moves or morphs on screen."
      }
    },
    "filePath": "src/tokens/base/motion/easing.json5",
    "isSource": true,
    "original": {
      "$value": [0.6, 0, 0.2, 1],
      "$type": "cubicBezier",
      "$description": "Smooth acceleration and deceleration. Use for elements moving or morphing within the viewport.",
      "$extensions": {
        "org.primer.llm": {
          "usage": ["position-change", "size-change", "morph-animation", "expand-collapse", "slide-transition"],
          "rules": "Use if an element moves or morphs on screen."
        }
      },
      "key": "{base.easing.easeInOut}"
    },
    "name": "base-easing-easeInOut",
    "attributes": {},
    "path": ["base", "easing", "easeInOut"],
    "value": [0.6, 0, 0.2, 1],
    "type": "cubicBezier",
    "description": "Smooth acceleration and deceleration. Use for elements moving or morphing within the viewport."
  },
  "base-easing-easeOut": {
    "key": "{base.easing.easeOut}",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["enter-animation", "element-appearing", "modal-open", "dropdown-open", "tooltip-appear"],
        "rules": "RECOMMENDED default. Use if an element enters or exits the viewport."
      }
    },
    "filePath": "src/tokens/base/motion/easing.json5",
    "isSource": true,
    "original": {
      "$value": [0.3, 0.8, 0.6, 1],
      "$type": "cubicBezier",
      "$description": "Decelerating motion. Use for elements entering the viewport or appearing on screen.",
      "$extensions": {
        "org.primer.llm": {
          "usage": ["enter-animation", "element-appearing", "modal-open", "dropdown-open", "tooltip-appear"],
          "rules": "RECOMMENDED default. Use if an element enters or exits the viewport."
        }
      },
      "key": "{base.easing.easeOut}"
    },
    "name": "base-easing-easeOut",
    "attributes": {},
    "path": ["base", "easing", "easeOut"],
    "value": [0.3, 0.8, 0.6, 1],
    "type": "cubicBezier",
    "description": "Decelerating motion. Use for elements entering the viewport or appearing on screen."
  },
  "base-easing-linear": {
    "key": "{base.easing.linear}",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["progress-bar", "loader", "continuous-animation", "scrolling"],
        "rules": "Use if the motion is constant."
      }
    },
    "filePath": "src/tokens/base/motion/easing.json5",
    "isSource": true,
    "original": {
      "$value": [0, 0, 1, 1],
      "$type": "cubicBezier",
      "$description": "Constant motion with no acceleration. Use for continuous animations like progress bars or loaders.",
      "$extensions": {
        "org.primer.llm": {
          "usage": ["progress-bar", "loader", "continuous-animation", "scrolling"],
          "rules": "Use if the motion is constant."
        }
      },
      "key": "{base.easing.linear}"
    },
    "name": "base-easing-linear",
    "attributes": {},
    "path": ["base", "easing", "linear"],
    "value": [0, 0, 1, 1],
    "type": "cubicBezier",
    "description": "Constant motion with no acceleration. Use for continuous animations like progress bars or loaders."
  }
}