Docs.

Install

REVA needs Node.js 24 or newer. It runs out of the box on macOS (Apple silicon) and Linux x64. It is free, and everything runs on your machine. The package is reva-cli on npm, and the source is on GitHub.

npm install -g reva-cli
reva doctor --install   # downloads REVA's own pinned headless browser, no sudo
reva doctor             # checks this machine

REVA only ever starts its own headless browser, with a throwaway profile. It never opens or touches your own browser. On another platform, point REVA_BROWSER_CACHE at a Puppeteer-style browser cache that holds a headless shell.

Your first look

Start with REVA's own demo page. It ships with REVA and runs offline. At the end, REVA prints the path of the motion card it wrote.

reva demo                # what moves when the demo page loads
reva demo --do hover     # a card lifting on hover
reva demo --do scroll    # a reading-progress bar tied to the scroll

Then point it at a page you may analyse:

# what moves most on load
reva look https://your-site.example --do load
# one element, by CSS selector
reva look https://your-site.example --el ".hero h1"
reva look https://your-site.example --el ".card" --do hover
# scroll-linked motion, with its motion card
reva look https://your-site.example --do scroll --card

Reading the values

Every number REVA prints carries one label.

exact

Read from the page itself, its CSS or a declared animation: duration, delay, easing, repeat count.

fitted

Measured frame by frame and fitted to a law, with the fit error next to it. Start and end values are always measured from the frames, so they show as fitted even when the page declares them.

unknown

Not measured well enough to state. The reason is given, with a way to measure it.

The design pass uses exact (the page's own CSS), measured (computed by the browser) and derived (REVA's own arithmetic, such as a contrast ratio), always with the unit. Fits are models: a fitted spring reproduces the recorded motion within the stated error, but it is not necessarily the code the site runs.

reva look

Records an element during one action, fits how it moves and says it in plain words. Without --el, it ranks the elements that move most.

reva look <url> [--el <selector> | --pick] [--do load|hover|click|scroll] [options]

--el <selector>

The element to look at. A ::before or ::after after the selector is measured as its own element.

--pick [key|N]

Rank the moving elements and choose one: by its key (stable between runs), by its rank in this run, or interactively in a terminal.

--do

The action: load (default), hover, click or scroll.

--on <selector|x,y>

What to hover or click, when it is not the element itself. A point x,y moves the pointer there, for cursor followers.

--after <selector>

Click this first, let the page settle, then record: for motion that only exists after a click.

--press <ms>

How long a click holds the button down. Default 300.

--card

Also write the motion card and print its path.

--code [css,gsap,motion,lenis]

Print code for the motion in those stacks. A stack with no code for it gets one line saying so.

--json

Print look.json instead of plain words.

--verbose

Also print the values that changed form but not on screen.

--no-design

Skip the design pass that a look runs by default.

--no-retake

Skip the stability check: by default a look runs the action once more and flags any motion that differs between the two runs.

--allow-cdn, --allow-net

Let a local page fetch from the known library and font CDNs, or from the hosts you name. See your own pages.

--ignore-robots

Open a page even when its robots.txt disallows it. Only for sites you own or may test.

--engine chs|cft

The browser: the headless shell that doctor --install installs, or Chrome for Testing when you have it.

Actions

A click has three phases: the pointer rests on the target, the button goes down for --press ms, and comes back up. Each motion says which phase it starts on. With hover and click, motion that started before the action, or plays on its own time, is left out.

reva look https://your-site.example --el ".btn" --do click --press 800
reva look https://your-site.example --after ".open" --el ".panel .btn" --do click
reva look https://your-site.example --el ".nav a::after" --do hover
# how the page itself scrolls (smoothing, or native)
reva look https://your-site.example --do scroll --el html

When the element you name is hidden or does not react, REVA tries the other controls on the page, starts again with the one that changes your element, and says what it chose.

Your own pages

A page on localhost works the same way, and runs offline: every other host is blocked, and the output lists what was blocked. If your page loads GSAP, Lenis or fonts from a CDN, allow it:

reva look http://localhost:5173/ --allow-cdn
reva look http://localhost:5173/ --allow-net cdn.example.com,assets.example.com

To skip --ignore-robots on your own live sites, list their domains under "ownDomains" in ~/.reva/config.json.

reva design

How the page is designed, in plain words: fonts and their roles, type scale, colours with their roles and contrast, spacing, radii, shadows, layout, breakpoints and hover or focus changes. It reads no page text, images or font files.

reva design https://your-site.example
reva design https://your-site.example --tokens   # also write design-tokens.css and .json

--tokens

Write the design as tokens, CSS and JSON.

--all

List every type style and shadow.

--json

Print design.json.

reva card

Writes the motion card for an earlier look: one self-contained HTML file with the replay, every value and its label, and code tabs for CSS, GSAP, Motion and Lenis. reva look ... --card writes it right away. What a card shows.

reva card ~/.reva/out/look/<analysis> --out card.html

reva compare

Looks at two pages the same way, one after the other, and tells you how their motion differs. Use it to check a rebuild against the original: each motion comes back as the same, close (with the difference) or different, and motions found on only one page are listed. --do, --el and --on work as in reva look; --card also writes a page with both curves drawn over each other.

reva compare https://your-site.example http://localhost:3000 --card

reva demo

Runs a look on REVA's own bundled demo page, served on your machine with no network, and writes its card. --do picks the action: a rise and a spring on load, a card on hover, a switch on click, a progress bar on scroll.

reva doctor

Checks this machine: the browser, its isolation, the data folder. --install first downloads the pinned headless browser into ~/.reva, checked by its hash, with no sudo.

reva mcp

Serves REVA's tools over MCP for a coding agent such as Claude Code. reva tools lists the same tools on the command line. Setting up an agent.

claude mcp add reva -- reva mcp

Your data

No telemetry, no upload, no hosted service. Recordings, readings, cards and the browser live in ~/.reva. Set REVA_HOME to move it, and delete it to remove everything REVA stored.

A look has a five-minute limit (four for reva design). Run one look at a time. The full list of what REVA cannot read is on limits.

For site owners

REVA reads robots.txt before a page opens, and again for every redirect. It obeys the group for User-agent: * and the group for its own name, and also respects the groups for ClaudeBot, anthropic-ai and Claude-User. Its requests carry the user agent REVA/0.1. To opt out of REVA only:

User-agent: REVA
Disallow: /