Keyframer Inspector

A screenshot of the app. With atMs, first shows that moment of the last recording. Needs an app that can capture its screen (inspector_status says how to set it up).

Start a fix loop: measure the app and keep the result as the baseline recheck compares with. Scenarios (default all the app registered) run the median of several runs after a warm-up, each from a clean start (the app's reload). Or a recording: a .kfrec.json file (with sourceMap for a preview build), or "current" for the last recording; each of its problems is then verified by a scenario that reproduces it, by playing the recording back (UI-thread, rendering and layout problems only), or marked Not verifiable. Returns the problems ranked, each with a short ref (P1…), where it is, evidence, the fix, how it will be verified, and the motion that must keep working. With field (a Motion Vitals problem id from field_problems, like SHOP-12), it also says whether that call site dropped frames here: reproduced or not reproduced. Takes minutes on a big app.

Compare two recorded sessions (ids from record / stop_recording / run_scenario, default the last two): frame rates, frames lost, longest frames, rendering, JS task and worklet time, and which problems were fixed, remain or are new.

Render the last recording to a GIF or MP4 file, frame by frame from the app (needs captureScreen). MP4 needs ffmpeg on the PATH; GIF does not.

Compare two versions of a Motion Vitals project, the way its Versions page does: hitch time, slow and frozen frames, janky sessions, and every problem call site as Worse, Came back, New, Still there, Better, Fixed or Ignored, with its drop rate in each version. Default: the latest version against the one before it with enough sessions. After a fix ships, it says whether the field problem is Fixed. Needs KEYFRAMER_VITALS_READ_KEY.

The top field problems of a Motion Vitals project (slow frames from production, keyframer.dev/app/vitals), most frames lost first, in the dashboard's words: where each is (call site and screen), how many frames it drops while it runs against its screen's baseline, the devices and OS where it is worst, the causes of its slow frames, its status (New, Came back, Worse, Ongoing, Resolving, Fixed, Ignored), the check command and the dashboard's agent prompt. Then check with field: "<id>" measures it here. Needs KEYFRAMER_VITALS_READ_KEY: a workspace read key (kfw_) or a kf_ API key.

A screenshot the recording took on the device (recordings made on the device carry a few): the one shown at atMs.

A session as a timeline: frame drops, JS tasks with where they are written, UI worklets over 2 ms a frame, React commits with the components that rendered and why, animations with symbolicated stacks, logs.

Which app is connected through Metro, the scenarios it registered, the recorded sessions, the shared values (useSharedValue) it has rendered, the worklet mistakes in its code that crash it (with the fix), and what animates now as the app counts it: animated styles and shared values mounted on the screen, what each value drives (fan-out), animation starts per frame by call site, rows that remount, and the cost per list cell.

Read the project's source for the mistakes the inspector's Babel plugin finds while Metro builds it, without running the app (keyframer-inspect lint): worklet crashes (a worklet using a value declared after it, or calling a JS function on the UI thread; severity crash, always listed) and motion mistakes that do not crash (a descending interpolate range, scheduleOnRN on every frame, a spring config without mass, a shared value read while rendering, deprecated APIs…; severity error, warning or info). Over the project root this server was started with, or files and folders inside it; node_modules, build output and native folders are skipped. Returns each finding as file:line, severity, rule, message and its fix, most severe first. No app needs to be connected. React Native (Reanimated, worklets, Gesture Handler) only.

The recordings in this project's library (.keyframer/recordings), newest first: ones made on a device, saved in the panel or with save_recording, and the ones kept automatically when a recording stops (the panel's, record's, stop_recording's and run_scenario's; marked automatic, only the newest are kept), with the titles they were renamed to.

Open a recording file (.kfrec.json) made on a device (Motion Scan record button) or saved from the panel. It becomes the recording every other tool reads; returns its report. A recording from a build without Metro (an internal preview build) has raw stacks: pass that build's source map to map them to source lines.

Play the last recording back into the app in real time, from a moment (default the start).

Measure what check measured again, the same way, and compare with check's baseline. Returns Fixed (gone, and its animations still start and its values still move), Still there, New, Removed (gone because its animation or value stopped: not a fix), Not verifiable, the numbers before and after, and done: true or false with the reason. Call it after a change has reloaded in the app (Fast Refresh, hot reload or a rebuild).

Record the app for a while: every shared value (also ones that mount mid-recording), both threads' frame rates and long frames, animations with call sites and stacks, React commits with why components rendered, JS tasks (handlers, effects, timers) and UI-thread worklet time. A person interacts with the app meanwhile (or pass replay: true). Returns the problems found, ranked, each with where it is written and how to fix it. It blocks for durationMs: when you drive the app yourself with another tool (Argent, agent-device, a Maestro flow), use start_recording and stop_recording instead. Prefer run_scenario when the app registered one for the interaction: it is reproducible, so a fix can be checked with compare.

Run the app's registered replay (registerReplay): re-mount the screen, re-run its entrance.

Run one of the app's registered scenarios (registerScenario: a reproducible interaction, like opening a sheet or scrolling a feed) while recording, and report the problems. Run it before and after a change, then compare the two sessions to check the fix.

Keep the last recording for good in the library, as a .kfrec.json file the dev tools panel can open. record, stop_recording and run_scenario keep each recording automatically (only the newest automatic ones stay): saving one of those keeps that copy instead of writing a second one.

Set every recorded shared value to its value at a moment of the last recording, so the app shows that frame.

Slow down, pause or step the app's animations on the device, to watch a fast animation or a glitch frame by frame (capture_frame shows the screen). scale: 1 is normal speed, 0.5 half, 0.25 a quarter, 0.1 a tenth, 0 paused. step, with scale 0: advance that many frames at the display's refresh rate, then hold again. Returns the speed the app says it runs at now; every panel shows the same. Recordings made while slowed carry time markers and their durations are stretched by 1 / scale: set scale 1 again before measuring. Needs an app that lists the time capability (inspector_status says).

Start recording the app and return at once, so you can drive it with another tool between this call and stop_recording: taps, swipes and flows from a simulator agent (Argent, agent-device, Maestro) or anything else. Records what record does (every shared value, both threads' frame rates and long frames, animations with call sites, React commits, JS tasks, UI-thread worklet time). One recording at a time; it stops by itself after 5 minutes. Use record instead for a fixed stretch while a person uses the app, and run_scenario when the app registered the interaction.

Stop the recording start_recording began and report the problems found, ranked, each with where it is written and how to fix it: the same report as record. The session is kept for get_trace, compare, save_recording and export_recording. Says so when the recording stopped early: the app disconnected or restarted, or the cap was reached.