Keyframer

Search 150+ free Keyframer recipes (bounce, carousels, progress rings, particles, text effects, shaders, scroll animations…). Each recipe has a scene + verified React Native Reanimated code. Returns slugs for get_recipe.

{
  "type": "object",
  "properties": {
    "query": {
      "type": "string",
      "description": "What to build, e.g. \"snap carousel with parallax\" or \"countdown ring\""
    },
    "category": {
      "type": "string",
      "enum": [
        "guides",
        "keyframes",
        "node-graphs",
        "shaders",
        "timing",
        "gestures",
        "scroll-lists"
      ]
    },
    "limit": {
      "type": "integer",
      "minimum": 1,
      "maximum": 25
    }
  },
  "required": [
    "query"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Fetch one recipe by slug: metadata, the scene JSON (usable as a starting point for create_scene), and the generated React Native Reanimated component code. Recipe code is free to use.

{
  "type": "object",
  "properties": {
    "slug": {
      "description": "Recipe slug from search_recipes",
      "type": "string"
    },
    "id": {
      "description": "Alias for slug — a scene id from a recipe works too",
      "type": "string"
    },
    "scene_id": {
      "description": "When a recipe has several scenes, pick one (defaults to the first)",
      "type": "string"
    },
    "include_code": {
      "description": "Include generated code (default true)",
      "type": "boolean"
    }
  },
  "$schema": "http://json-schema.org/draft-07/schema#"
}

The Keyframer scene JSON format — read this before authoring a scene. Section "scene" covers elements/keyframes/easing; section "nodes" covers node graphs (procedural animation: clocks, springs, repeaters) with the full node-type schema.

{
  "type": "object",
  "properties": {
    "section": {
      "description": "Default \"scene\"",
      "type": "string",
      "enum": [
        "scene",
        "nodes"
      ]
    }
  },
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Validate a scene against the Keyframer format before create_scene or generate_code. Returns errors (must fix) and warnings (advisory). Free to call — iterate until clean.

{
  "type": "object",
  "properties": {
    "scene": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "object",
          "propertyNames": {
            "type": "string"
          },
          "additionalProperties": {}
        }
      ],
      "description": "The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape."
    }
  },
  "required": [
    "scene"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Numerically preview a scene: evaluates keyframes AND node graphs at N evenly spaced times and returns each moving prop as a value series (the same math the editor preview runs). validate_scene checks structure — this checks MOTION: confirm ranges, spring overshoot, stagger offsets, and that elements actually move before create_scene. Free to call — iterate: author → sample → adjust.

{
  "type": "object",
  "properties": {
    "scene": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "object",
          "propertyNames": {
            "type": "string"
          },
          "additionalProperties": {}
        }
      ],
      "description": "The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape."
    },
    "samples": {
      "description": "Sample count across the duration (default 9)",
      "type": "integer",
      "minimum": 3,
      "maximum": 25
    },
    "element_ids": {
      "description": "Only report these element ids",
      "type": "array",
      "items": {
        "type": "string"
      }
    }
  },
  "required": [
    "scene"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Save a scene and get an editor URL where it opens in the visual editor (timeline, canvas, node graphs, mobile QR preview). Validates first. Works without a key: the scene is then a public 24-hour guest scene with a scannable QR, kept forever by signing up (free) and pressing Remix. With a key it saves to the account (free accounts up to the free scene limit, paid unlimited).

{
  "type": "object",
  "properties": {
    "scene": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "object",
          "propertyNames": {
            "type": "string"
          },
          "additionalProperties": {}
        }
      ],
      "description": "The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape."
    },
    "name": {
      "description": "Scene name shown in the editor (default \"MCP scene\")",
      "type": "string",
      "maxLength": 120
    },
    "make_public": {
      "description": "Make the scene publicly viewable — its share link (keyframer.dev/share/<id>) and QR then work for anyone, not just this account",
      "type": "boolean"
    }
  },
  "required": [
    "scene"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Replace the content of one of your scenes (full scene JSON, validated first) — the edit loop for iterating instead of duplicating. Live previews watching the scene update in place. Requires an API key; own scenes only.

{
  "type": "object",
  "properties": {
    "scene_id": {
      "type": "string",
      "description": "Scene id from create_scene or list_scenes"
    },
    "scene": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "object",
          "propertyNames": {
            "type": "string"
          },
          "additionalProperties": {}
        }
      ],
      "description": "The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape."
    },
    "name": {
      "description": "New name (unchanged if omitted)",
      "type": "string",
      "maxLength": 120
    },
    "make_public": {
      "description": "Change public visibility (unchanged if omitted)",
      "type": "boolean"
    }
  },
  "required": [
    "scene_id",
    "scene"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

List the scenes in the connected Keyframer account (id, name, updated, visibility). Requires an API key.

{
  "type": "object",
  "properties": {},
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Fetch one of your scenes (or any public scene) as JSON — edit it and re-save with update_scene, or feed it to generate_code. Requires an API key.

{
  "type": "object",
  "properties": {
    "id": {
      "type": "string",
      "description": "Scene id from list_scenes or an editor URL"
    }
  },
  "required": [
    "id"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

A terminal-scannable QR code for a scene. Scan it with a phone camera and the scene runs live in the Keyframer preview app on real hardware — edits sync as they happen. Public scenes (including guest scenes) work without a key; private scenes need an API key on a paid plan.

{
  "type": "object",
  "properties": {
    "scene_id": {
      "type": "string",
      "description": "Scene id from create_scene or list_scenes"
    }
  },
  "required": [
    "scene_id"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Compile a scene into a runnable React Native component. Pass inline scene JSON or a scene_id from your account. Output targets Reanimated v4 by default ("animated" targets the RN core Animated API, reduced feature set). Deterministic — no AI, no credits. Requires an API key on a paid plan.

{
  "type": "object",
  "properties": {
    "scene": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "object",
          "propertyNames": {
            "type": "string"
          },
          "additionalProperties": {}
        }
      ],
      "description": "The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape."
    },
    "scene_id": {
      "description": "Generate from a saved scene instead of inline JSON",
      "type": "string"
    },
    "api": {
      "description": "Default \"reanimated\"",
      "type": "string",
      "enum": [
        "reanimated",
        "animated"
      ]
    },
    "relative_positioning": {
      "description": "Emit flex-relative layout instead of absolute coordinates",
      "type": "boolean"
    },
    "gesture_handler_version": {
      "description": "react-native-gesture-handler major (default v2)",
      "type": "string",
      "enum": [
        "v2",
        "v3"
      ]
    }
  },
  "$schema": "http://json-schema.org/draft-07/schema#"
}