Frame Lens is a free MCP server for Claude Code, Codex, Cursor, Claude Desktop,
VS Code, Windsurf and any other MCP client. It runs on your computer, needs no API key, and the npm package has no
runtime dependencies. It reads YouTube and hundreds of other sites, local files, live websites, Lottie, Rive and
Figma, and turns what it finds into starter projects for HyperFrames, Remotion, CSS, After Effects and Lottie.
Why Frame Lens
An agent that "watches" a video usually gets a handful of stills or the captions, and describes what it guesses:
"a quick, smooth move". That is not something you can build from.
Frame Lens measures. We animated a square in HyperFrames with cubic-bezier(0.22, 1, 0.36, 1), 640 px in 18
frames at 30 fps, rendered it, and gave the video to Frame Lens. track measured
cubic-bezier(0.231, 0.951, 0.384, 0.996), starting at 10.600 s (0 frames off), never more than 0.18 px
from where the square really was on any frame, grade exact. A spring of stiffness 170 and damping 12 read back as
stiffness 170.01. export then writes that curve into CSS, Remotion, HyperFrames, After Effects or Lottie, and
compare checks your render against the reference. How the demo was measured:
scripts/demo/CHECK.md.
On the 33-second Big Buck Bunny trailer it finds 11 cuts to the frame (9.08 s, 11.20 s, 13.20 s, 13.88 s,
15.00 s, 16.00 s, 16.60 s, 24.92 s, 26.00 s, 29.96 s, 31.04 s), 10 fades and dissolves with their length (the
opening dissolve runs 24 frames, 3.48–4.44 s), and 20 shots at 25 fps with a palette each.
- Measured, not described. Cuts on their exact frame, every move with its duration and curve, an OKLab palette per
shot, loudness, tempo and beats, transcripts with the time of every word.
- Exact where the source allows it. Live websites, Lottie, Rive and Figma are read from their own data, not
estimated from pixels.
- Honest numbers. Every number says how it was obtained:
measured, derived (fitted) or inferred.
- Cheap on tokens. It looks like a loupe: one overview sheet, then dense frames only where something happens.
- Local and free. ffmpeg and yt-dlp are set up for you on first use (pinned and checksum-verified).
See it work
Real Frame Lens readings from the website: the
Big Buck Bunny trailer and the demo film's own render.
Quick start
1. Install. In your project folder (needs Node.js 20+):
npx -y framelens init
This adds .mcp.json (the Frame Lens server, pinned to framelens@<version> on npm) and the agent skill to the
project. For Claude Code in every project, Codex, Cursor and other clients, see
Install in your client.
2. Ask your agent in plain words. Start a new session and paste a link or a file path:
Use this as a motion reference for my product promo: https://youtu.be/<video-id>
Turn this tutorial into a step-by-step guide. · Summarize this podcast and find where they talk about pricing. · Make my landing page animate like https://example.com
3. Open the results. Everything lands in .framelens/<id>/ in your project: contact sheets, STYLE.md,
TIMELINE.md, motion-spec.json, TRACK.md with the fitted curves, and a starter project for your renderer.
The agent quotes the numbers with their evidence label.
The first time a tool needs ffmpeg or yt-dlp and cannot find it, Frame Lens downloads a pinned, verified build and
says so. To check your machine ahead of time: npx -y framelens doctor --prepare.
What you can ask
| You want | Say something like | Frame Lens does |
|---|
| Listen: a podcast, lecture, interview | "Summarize this 3-hour podcast and find where they talk about pricing" | Word-timed transcript and one overview sheet; no wasted frames |
| Learn: a tutorial into steps | "Turn this tutorial into a step-by-step guide" | Finds every screen change, frames with the words spoken there, text read from the screen |
| Find a moment | "Where does he set up DNS?" | Frames around the phrase in the transcript |
| Style: replicate the motion | "Use this as a reference for my product promo" | Cuts to the frame, shots, palette, every move with its duration and easing; the exact curve of the moves that matter; a starter project; a check of your render |
| Sound design | "What is the sound design here?" | Loudness, silences, hits, tempo and beat grid, how many cuts land on the beat, a spectrogram |
| Production | "How was this shot?" | Shots with key frames for camera, light and source |
| A website's motion | "Make my landing animate like this site" | The page's real animation curves, durations, fonts and colours, then a CSS or Motion starter |
| A Lottie, Rive or Figma file | "Rebuild this Lottie in Remotion" | Exact keyframes and curves from the file, then a starter in any target |
Tools
Local and measured (ffmpeg on your computer, yt-dlp for links; set up automatically when missing):
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
