REVA

Ask your coding agent.

REVA is also an MCP server. Add it once to Claude Code, or to any agent that speaks MCP, then ask for a page's motion in plain words and get the values and the code back in your conversation.

Add it in one line.

With REVA installed, add the server to Claude Code:

claude mcp add reva -- reva mcp

Or run it without a global install:

claude mcp add reva -- npx -y reva-cli mcp

Other agents take the same command, reva mcp, as a local server over stdio. Run reva doctor --install once first, so REVA has its browser.

A conversation.

This one uses REVA's own demo page, so you can run it yourself. The values are the ones REVA returned.

Analyze REVA's demo page on load. What moves, and how?

Used reva tool look

Three things move. The headline rises 32 px and fades in over 900 ms after a 150 ms delay, on cubic-bezier(0.22, 1, 0.36, 1). The intro paragraph fades in over 700 ms with ease-out, after 450 ms. Both are read exactly from the page's CSS.

The dot is moved by a script, so REVA measured it: a bouncy spring that overshoots by about 13 % and settles in 650 ms. Those values are fitted, not read.

Give me the dot's spring for Motion.

Used reva tool code

These stiffness and damping values reproduce the fitted curve in Motion. The site's own settings can't be known exactly, so REVA marks this code as matching the fit:

animate(el, { x: [120, 0] }, {
  type: "spring",
  stiffness: 175.205,
  damping: 14.425,
  mass: 1,
  velocity: -43.2971,
})

What the agent can use.

  • look looks at a URL, or at the demo page, and measures what moves
  • motions lists what moved and how
  • design reads how the page is designed
  • code writes code for CSS, GSAP, Motion or Lenis
  • curve gives the measured frames of a motion
  • card writes the motion card for chosen motions
  • compare looks at two pages the same way and says how their motion differs
  • unknowns lists what could not be told, and why
  • doctor checks the machine

look takes the action, a target selector and a trigger. A few options stay on the command line only: --press, --after, --hold and --wheels.

Things to ask.

  • Look at the hero of https://your-site.example on load and give me the motion as CSS.
  • Compare https://your-site.example with my rebuild on localhost:3000. Does the hero move the same?
  • Hover the first card on https://your-site.example. How far does it lift, and on what curve?
  • What is this page's type scale, and which colours are used for text?
  • Which values did you have to fit, and how far off could they be?

Page text is data.

Text that comes from a page is untrusted input. REVA marks it as such in its results and never puts it into the code it writes, but your agent should still treat it as data, never as instructions.

Over MCP, local and private network addresses are blocked unless you start the server with reva mcp --allow-local. Everything else holds as on the command line: robots.txt is read first, login walls stop the look, and one page is read at a time.