dev.keyframer由 keyframer.dev 發布官方發布者v1.0.0更新於 Oct 25, 2026
150+ React Native animation recipes, scene authoring, phone preview via QR, Reanimated v4 codegen
Keyframer 讓助理搜尋 React Native 動畫配方、撰寫並驗證 Keyframer 場景 JSON、透過 QR 碼在手機上預覽場景，並編譯成程式碼。
Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。
把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式，或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南，先向你展示發布者、端點和登入方式，經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。
閱讀 https://sourceweft.com/mcp/dev.keyframer%2Fkeyframer/install.md，並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前，先告訴我它的發布者、端點和登入方式，等我確認。不要把 API 金鑰寫進命令或我會提交的檔案；問我金鑰應從哪裡取得。把它新增到你客戶端的 mcpServers 設定中。
{
"mcpServers": {
"keyframer": {
"type": "http",
"url": "https://api.keyframer.dev/mcp"
}
}
}Search animation recipes
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.
limitquery必填categoryGet a recipe (scene + code)
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.
idslugscene_idinclude_codeScene format authoring guide
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.
sectionValidate scene JSON
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.
scene必填Sample animation values over time
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.
scene必填sampleselement_idsCreate a scene in Keyframer
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).
namescene必填make_publicUpdate a scene
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.
namescene必填scene_id必填make_publicList your scenes
List the scenes in the connected Keyframer account (id, name, updated, visibility). Requires an API key.
無需輸入參數。
Get a scene
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.
id必填Preview on device (QR)
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.
scene_id必填Generate React Native code
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.
apiscenescene_idrelative_positioninggesture_handler_version已滿足適用檢查項的 83%
該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。
請宣告包含 README 的 GitHub 儲存庫，或在 OAuth 受保護資源後設資料中提供 resource_documentation。
託管服務按其提供方的條款使用，因此這裡不要求授權條款。此檢查項不計入百分比。