REVA

The motion card.

Every look can end in a motion card: one HTML file that you open in any browser, offline. This is the real card REVA wrote for our spring press example. Scroll, and the window walks through it.

  1. What moves, and when

    The card opens on the whole take: the page replays as REVA saw it, each moving element outlined, and one plain sentence says what moved and when it all settled.

  2. One panel per motion

    Each element gets the plot that suits it: a curve with its lead-in, a spring with its overshoot and settle, a scroll link on its own axis. The element's own pixels replay on the measured curve.

  3. Everything on one timeline

    All the motions side by side on one time axis, so you can see what starts first, what overlaps and what waits.

  4. How the page is designed

    The type scale, colours and contrast, spacing, radii and layout, each value marked exact, measured or derived.

  5. What REVA could not tell

    What REVA could not settle is listed with the reason and a way to measure it, beside how and when the look was recorded. Nothing is guessed.

Code you can paste.

Each motion panel has tabs for CSS, GSAP, Motion and Lenis. Each tab says how faithful it is: as declared when it is the page's own value, matches fit when it reproduces the fitted curve, or approx with the largest error. A stack that cannot express a motion says so in one line instead of guessing.

reva look https://your-site.example --el ".btn" --do click --card
reva card ~/.reva/out/look/<analysis>   # a card for an earlier look

One file, yours to keep.

The card is a single self-contained file, made on your machine. It works at phone width, honours reduced motion, follows your light or dark setting, and opens every fold when you print it.

When a page draws with WebGL, the card shows its shader source so you can read how it works, the way DevTools would. That source stays on your machine; it never goes into the code REVA writes for you.