{
  "title": "Motion Easing Visualizer",
  "human_url": "https://happytails.ai/en/design-tools/motion-easing-visualizer/",
  "agent_url": "https://happytails.ai/agents/en/design-tools/motion-easing-visualizer/",
  "language": "en",
  "markdown_url": "https://happytails.ai/en/design-tools/motion-easing-visualizer.md",
  "content": "Motion Easing Visualizer\nCompare up to six animation timing curves side by side and export sampled values plus ready-to-use CSS. Springs are converted to a CSS linear() function with the error stated.\nHow can we improve this tool?\nReport a problem or share an idea.\nPlease leave out private information. Your message and the tool name go to our team via PostHog.\nHow to use Motion Easing Visualizer\nEnter one timing function per line, such as ease, cubic-bezier(0.34, 1.56, 0.64, 1), steps(4, jump-end), linear(0, 0.5 50%, 1) or spring(1, 100, 10, 0).\nChoose how many samples the table should have and the animation duration.\nPick the error tolerance for spring exports.\nDownload the curve chart, the sampled CSV table and the JSON report with CSS values.\nUseful next steps\nCss Keyframe Timeline Editor\nCss Transform Matrix Inspector\nGradient generator\nHow curves are evaluated\ncubic-bezier(), steps() and linear() follow the CSS Easing Functions Level 1 and Level 2 specifications from the W3C (read 16 October 2026). Bezier curves are solved for time with Newton iterations and a bisection fallback to an accuracy of 0.0000001. Named keywords such as ease and ease-in-out use their standard control points.\nSprings\nspring(mass, stiffness, damping, velocity) is a Happytails.ai notation for a damped harmonic oscillator moving from 0 to 1, solved in closed form. Its duration is the time after which it stays within 0.001 of the end value. Because CSS has no spring function, the export is a linear() list of evenly spaced points, and the report gives the largest difference between that list and the real spring. The list ends at exactly 1 while the spring is still up to 0.001 away, so that final step counts toward the difference.\nLimits\nValues are rounded to four decimals in the table. The time column spreads every curve over the duration you choose; spring curves also report their own natural duration. Browser preview of moving objects is a page feature and is not part of the downloads.",
  "content_format": "text/plain",
  "visibility": "public",
  "links": [
    {
      "name": "Css Keyframe Timeline Editor",
      "url": "https://happytails.ai/en/developer-tools/css-keyframe-timeline-editor/"
    },
    {
      "name": "Css Transform Matrix Inspector",
      "url": "https://happytails.ai/en/developer-tools/css-transform-matrix-inspector/"
    },
    {
      "name": "Gradient generator",
      "url": "https://happytails.ai/en/design-tools/gradient-generator/"
    }
  ],
  "tool": {
    "id": "motion-easing-visualizer",
    "category": "design-tools",
    "built": true,
    "requirements": "Up to 4000 characters and 1 to 6 timing functions. The table has 2 to 101 samples over a duration of 1 to 60000 milliseconds. Springs must settle within 30 seconds. Everything is computed on your device. Downloads are a CSV sample table, a JSON report with CSS values and an SVG chart.",
    "implementation": {
      "fields": [
        {
          "key": "samples",
          "label": "Table samples",
          "value": 11,
          "type": "number",
          "min": 2,
          "max": 101,
          "step": 1
        },
        {
          "key": "durationMs",
          "label": "Duration in milliseconds",
          "value": 1000,
          "type": "number",
          "min": 1,
          "max": 60000,
          "step": 1
        },
        {
          "key": "springTolerance",
          "label": "Spring export tolerance",
          "value": "0.005",
          "type": "select",
          "values": [
            "0.01",
            "0.005",
            "0.001"
          ]
        }
      ],
      "registrationFamily": "scene-composer-reference",
      "inputMaxLength": 4000,
      "inputErrorCode": "SCENE_COMPOSER_REFERENCE_EASING_TOO_LONG",
      "note": "Up to 6 timing functions are sampled on your device from at most 4000 characters.",
      "experience": {
        "automatic": false,
        "single": false,
        "inputMaxLength": 4000,
        "inputMode": "text",
        "label": "Timing functions",
        "placeholder": "ease-in-out\ncubic-bezier(0.34, 1.56, 0.64, 1)",
        "help": "Enter one CSS timing function or spring(mass, stiffness, damping, velocity) per line. Up to 4,000 characters. Review the settings before running.",
        "action": null
      },
      "mode": "explicit",
      "interactive": false
    },
    "execution": "Browser interface",
    "api": null,
    "browser_agent": {
      "supported": true,
      "name": "run_current_tool",
      "discovery": "WebMCP on the human page in a supporting browser",
      "verification": "See audit/API-AUDIT.md; availability is not verification"
    }
  },
  "markdown": "# Motion Easing Visualizer\n\n- Human page: https://happytails.ai/en/design-tools/motion-easing-visualizer/\n- Markdown: https://happytails.ai/en/design-tools/motion-easing-visualizer.md\n- Structured JSON: https://happytails.ai/agents/en/design-tools/motion-easing-visualizer/index.json\n- Visibility: public\n\n## Tool capabilities\n\n| Property | Value |\n| --- | --- |\n| Tool ID | `motion-easing-visualizer` |\n| Category | design-tools |\n| Implementation | Registered implementation. Registration alone is not a production-quality guarantee. |\n| Browser execution | Use the visible action or interactive controls. |\n| Browser processing | Browser; see tool notes for network behavior. |\n| HTTP API | Not callable through HTTP. |\n| Browser-agent interface | run_current_tool |\n\n### Implementation notes\n\nUp to 6 timing functions are sampled on your device from at most 4000 characters.\n\n### Inputs and settings\n\nText input: Timing functions.\n\nExample or placeholder shown in the interface (not a validated fixture):\n\n```text\nease-in-out\ncubic-bezier(0.34, 1.56, 0.64, 1)\n```\n\nEnter one CSS timing function or spring(mass, stiffness, damping, velocity) per line. Up to 4,000 characters. Review the settings before running.\n\n| Setting | Meaning | Control type | Default | Constraints |\n| --- | --- | --- | --- | --- |\n| `samples` | Table samples | number | 11 | min=2 max=101 step=1 |\n| `durationMs` | Duration in milliseconds | number | 1000 | min=1 max=60000 step=1 |\n| `springTolerance` | Spring export tolerance | select | \"0.005\" | Allowed: 0.01, 0.005, 0.001 |\n\n### Browser-agent workflow\n\n1. Open the human page in a browser that supports WebMCP.\n2. Discover the interface exposed by that page; use its actual schema.\n3. Select files on the page first when the tool requires files.\n4. Call `run_current_tool` with valid input and settings.\n5. Inspect the returned result or error and the displayed output. Retrieve files from the displayed download links.\n\nCalls do not automatically copy or download results. Browser permissions still apply. Interface availability alone is not proof of successful execution.\n\n### Planning specification\n\nUp to 4000 characters and 1 to 6 timing functions. The table has 2 to 101 samples over a duration of 1 to 60000 milliseconds. Springs must settle within 30 seconds. Everything is computed on your device. Downloads are a CSV sample table, a JSON report with CSS values and an SVG chart.\n\nThis describes intended requirements. Use the implementation notes, interface schema and observed output to determine current support.\n\n### Complete machine-readable capability record\n\n```json\n{\n  \"id\": \"motion-easing-visualizer\",\n  \"category\": \"design-tools\",\n  \"built\": true,\n  \"requirements\": \"Up to 4000 characters and 1 to 6 timing functions. The table has 2 to 101 samples over a duration of 1 to 60000 milliseconds. Springs must settle within 30 seconds. Everything is computed on your device. Downloads are a CSV sample table, a JSON report with CSS values and an SVG chart.\",\n  \"implementation\": {\n    \"fields\": [\n      {\n        \"key\": \"samples\",\n        \"label\": \"Table samples\",\n        \"value\": 11,\n        \"type\": \"number\",\n        \"min\": 2,\n        \"max\": 101,\n        \"step\": 1\n      },\n      {\n        \"key\": \"durationMs\",\n        \"label\": \"Duration in milliseconds\",\n        \"value\": 1000,\n        \"type\": \"number\",\n        \"min\": 1,\n        \"max\": 60000,\n        \"step\": 1\n      },\n      {\n        \"key\": \"springTolerance\",\n        \"label\": \"Spring export tolerance\",\n        \"value\": \"0.005\",\n        \"type\": \"select\",\n        \"values\": [\n          \"0.01\",\n          \"0.005\",\n          \"0.001\"\n        ]\n      }\n    ],\n    \"registrationFamily\": \"scene-composer-reference\",\n    \"inputMaxLength\": 4000,\n    \"inputErrorCode\": \"SCENE_COMPOSER_REFERENCE_EASING_TOO_LONG\",\n    \"note\": \"Up to 6 timing functions are sampled on your device from at most 4000 characters.\",\n    \"experience\": {\n      \"automatic\": false,\n      \"single\": false,\n      \"inputMaxLength\": 4000,\n      \"inputMode\": \"text\",\n      \"label\": \"Timing functions\",\n      \"placeholder\": \"ease-in-out\\ncubic-bezier(0.34, 1.56, 0.64, 1)\",\n      \"help\": \"Enter one CSS timing function or spring(mass, stiffness, damping, velocity) per line. Up to 4,000 characters. Review the settings before running.\",\n      \"action\": null\n    },\n    \"mode\": \"explicit\",\n    \"interactive\": false\n  },\n  \"execution\": \"Browser interface\",\n  \"api\": null,\n  \"browser_agent\": {\n    \"supported\": true,\n    \"name\": \"run_current_tool\",\n    \"discovery\": \"WebMCP on the human page in a supporting browser\",\n    \"verification\": \"See audit/API-AUDIT.md; availability is not verification\"\n  }\n}\n```\n\n## Page guide\n\nCompare up to six animation timing curves side by side and export sampled values plus ready-to-use CSS. Springs are converted to a CSS linear() function with the error stated.\n\nHow can we improve this tool?\n\nReport a problem or share an idea.\n\nPlease leave out private information. Your message and the tool name go to our team via PostHog.\n\n### How to use Motion Easing Visualizer\n\n1. Enter one timing function per line, such as ease, cubic-bezier(0.34, 1.56, 0.64, 1), steps(4, jump-end), linear(0, 0.5 50%, 1) or spring(1, 100, 10, 0).\n2. Choose how many samples the table should have and the animation duration.\n3. Pick the error tolerance for spring exports.\n4. Download the curve chart, the sampled CSV table and the JSON report with CSS values.\n\n## Useful next steps\n\n- [Css Keyframe Timeline Editor](https://happytails.ai/en/developer-tools/css-keyframe-timeline-editor/) ([Markdown](https://happytails.ai/en/developer-tools/css-keyframe-timeline-editor.md))\n\n- [Css Transform Matrix Inspector](https://happytails.ai/en/developer-tools/css-transform-matrix-inspector/) ([Markdown](https://happytails.ai/en/developer-tools/css-transform-matrix-inspector.md))\n\n- [Gradient generator](https://happytails.ai/en/design-tools/gradient-generator/) ([Markdown](https://happytails.ai/en/design-tools/gradient-generator.md))\n\n## How curves are evaluated\n\ncubic-bezier(), steps() and linear() follow the CSS Easing Functions Level 1 and Level 2 specifications from the W3C (read 16 October 2026). Bezier curves are solved for time with Newton iterations and a bisection fallback to an accuracy of 0.0000001. Named keywords such as ease and ease-in-out use their standard control points.\n\n### Springs\n\nspring(mass, stiffness, damping, velocity) is a Happytails.ai notation for a damped harmonic oscillator moving from 0 to 1, solved in closed form. Its duration is the time after which it stays within 0.001 of the end value. Because CSS has no spring function, the export is a linear() list of evenly spaced points, and the report gives the largest difference between that list and the real spring. The list ends at exactly 1 while the spring is still up to 0.001 away, so that final step counts toward the difference.\n\n### Limits\n\nValues are rounded to four decimals in the table. The time column spreads every curve over the duration you choose; spring curves also report their own natural duration. Browser preview of moving objects is a page feature and is not part of the downloads.\n"
}