Motion
Durations and easing curves, springs with their frequency and damping, staggers, loops, scroll-linked timelines and smooth scrolling.
See exactly how anything moves.
REVA reads any web page frame by frame and gives you the real durations, curves and springs behind its motion, each one marked exact or fitted.
Rebuilt from the numbers alone.
Left, the original headline animation. Right, the same animation rebuilt from REVA's numbers alone, drawn as an outline over the original. The lines sit exactly on its shapes, frame for frame. Drag the seam to compare. We ran the same test on linear.app's headline, with the same result.
The motion card
-
See what moves
Every look ends in a motion card: an HTML page that replays the site's motion and outlines each element that moves.
-
Read the exact numbers
Durations, curves, springs and staggers. Each one is marked exact when the page declares it, or fitted when REVA had to measure it, and every fitted value carries its error.
-
Copy the code
Take a motion as CSS, GSAP, Motion or Lenis code, ready to paste into your own project. A stack that cannot express it says so.
Motion and design, read as numbers.
A look records the page on a virtual 120 fps clock, so a busy machine never changes the timing. It reads what happens on load, on scroll, on hover and on click.
Design
Fonts and their roles, the type scale, colours and contrast, spacing, radii, shadows, layout and breakpoints. reva design --tokens writes them out as design tokens.
Read exactly from CSS, Web Animations, GSAP, Lenis, Swiper, Lottie, Locomotive and anime.js.
When a page declares its motion through one of these, REVA reads the values as written. Motion the page drives with its own script is measured frame by frame and fitted. Either way, every number says how it was found.
-
exact
Read from the page itself: the duration, delay, easing and repeat it declares.
-
fitted
Measured frame by frame and fitted to a curve or a spring, with the error beside it.
-
unknown
Not measured well enough to state. REVA says why, and how you could measure it.
Start with one line.
Free, and it all runs on your machine: no upload, no account. Needs Node 24 or newer on macOS (Apple silicon) or Linux x64. Try REVA's own demo page first, then point it at any public URL.
Read the docsOr ask your coding agent.
REVA is also an MCP server. Add it to Claude Code, or any agent that speaks MCP, and ask in plain words. Text from a page comes back marked as untrusted: data, never instructions.
REVA for agentsLook at REVA's demo page on load and give me the headline's motion as CSS.
Used reva tools look and code
The headline rises and fades in over 900 ms, after a short delay, on the page's own easing curve. Every value is read exactly from its CSS:
.el {
opacity: 0;
transform: translateY(32px);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 150ms,
transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 150ms;
}
.el.to { opacity: 1; transform: translateY(0px); }