
150+ React Native animation recipes, scene authoring, phone preview via QR, Reanimated v4 codegen
Maintain this server? Claim it
Call this server's tools from your browser. Nothing to install.
Optional: 'Bearer kf_...' API key from keyframer.dev/app/profile (MCP tab). Recipe search, scene validation, and 24-hour guest scenes work with no key; a key saves scenes to your account.
Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.
Tool list from our last check. Connect live to refresh it.
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).
The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape.
Scene name shown in the editor (default "MCP scene")
Make the scene publicly viewable — its share link (keyframer.dev/share/<id>) and QR then work for anyone, not just this account
This tool isn't marked read-only, so it may change something on the server or in an account you connected.
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).
| Argument | Type | Description |
|---|---|---|
| name | string | Scene name shown in the editor (default "MCP scene") |
| scene* | any | The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape. |
| make_public | boolean | Make the scene publicly viewable — its share link (keyframer.dev/share/<id>) and QR then work for anyone, not just this account |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"scene"
],
"properties": {
"name": {
"type": "string",
"maxLength": 120,
"description": "Scene name shown in the editor (default \"MCP scene\")"
},
"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."
},
"make_public": {
"type": "boolean",
"description": "Make the scene publicly viewable — its share link (keyframer.dev/share/<id>) and QR then work for anyone, not just this account"
}
}
}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.
| Argument | Type | Description |
|---|---|---|
| api | string | Default "reanimated" |
| scene | any | The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape. |
| scene_id | string | Generate from a saved scene instead of inline JSON |
| relative_positioning | boolean | Emit flex-relative layout instead of absolute coordinates |
| gesture_handler_version | string | react-native-gesture-handler major (default v2) |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
"api": {
"enum": [
"reanimated",
"animated"
],
"type": "string",
"description": "Default \"reanimated\""
},
"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": {
"type": "string",
"description": "Generate from a saved scene instead of inline JSON"
},
"relative_positioning": {
"type": "boolean",
"description": "Emit flex-relative layout instead of absolute coordinates"
},
"gesture_handler_version": {
"enum": [
"v2",
"v3"
],
"type": "string",
"description": "react-native-gesture-handler major (default v2)"
}
}
}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.
| Argument | Type | Description |
|---|---|---|
| scene_id* | string | Scene id from create_scene or list_scenes |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"scene_id"
],
"properties": {
"scene_id": {
"type": "string",
"description": "Scene id from create_scene or list_scenes"
}
}
}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.
| Argument | Type | Description |
|---|---|---|
| id | string | Alias for slug — a scene id from a recipe works too |
| slug | string | Recipe slug from search_recipes |
| scene_id | string | When a recipe has several scenes, pick one (defaults to the first) |
| include_code | boolean | Include generated code (default true) |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
"id": {
"type": "string",
"description": "Alias for slug — a scene id from a recipe works too"
},
"slug": {
"type": "string",
"description": "Recipe slug from search_recipes"
},
"scene_id": {
"type": "string",
"description": "When a recipe has several scenes, pick one (defaults to the first)"
},
"include_code": {
"type": "boolean",
"description": "Include generated code (default true)"
}
}
}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.
| Argument | Type | Description |
|---|---|---|
| id* | string | Scene id from list_scenes or an editor URL |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"id"
],
"properties": {
"id": {
"type": "string",
"description": "Scene id from list_scenes or an editor URL"
}
}
}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.
| Argument | Type | Description |
|---|---|---|
| section | string | Default "scene" |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
"section": {
"enum": [
"scene",
"nodes"
],
"type": "string",
"description": "Default \"scene\""
}
}
}List the scenes in the connected Keyframer account (id, name, updated, visibility). Requires an API key.
No arguments.
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {}
}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.
| Argument | Type | Description |
|---|---|---|
| scene* | any | The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape. |
| samples | integer | Sample count across the duration (default 9) |
| element_ids | array | Only report these element ids |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"scene"
],
"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": {
"type": "integer",
"maximum": 25,
"minimum": 3,
"description": "Sample count across the duration (default 9)"
},
"element_ids": {
"type": "array",
"items": {
"type": "string"
},
"description": "Only report these element ids"
}
}
}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.
| Argument | Type | Description |
|---|---|---|
| limit | integer | |
| query* | string | What to build, e.g. "snap carousel with parallax" or "countdown ring" |
| category | string |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"query"
],
"properties": {
"limit": {
"type": "integer",
"maximum": 25,
"minimum": 1
},
"query": {
"type": "string",
"description": "What to build, e.g. \"snap carousel with parallax\" or \"countdown ring\""
},
"category": {
"enum": [
"guides",
"keyframes",
"node-graphs",
"shaders",
"timing",
"gestures",
"scroll-lists"
],
"type": "string"
}
}
}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.
| Argument | Type | Description |
|---|---|---|
| name | string | New name (unchanged if omitted) |
| scene* | any | The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape. |
| scene_id* | string | Scene id from create_scene or list_scenes |
| make_public | boolean | Change public visibility (unchanged if omitted) |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"scene_id",
"scene"
],
"properties": {
"name": {
"type": "string",
"maxLength": 120,
"description": "New name (unchanged if omitted)"
},
"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": {
"type": "string",
"description": "Scene id from create_scene or list_scenes"
},
"make_public": {
"type": "boolean",
"description": "Change public visibility (unchanged if omitted)"
}
}
}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.
| Argument | Type | Description |
|---|---|---|
| scene* | any | The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape. |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"scene"
],
"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."
}
}
}