Five motions, read by REVA.
We built five small pages, each one a motion people often want to learn. Then REVA looked at each of them. Try the page, then switch the window to the motion card REVA wrote for it. The values it read match what we built, and where they do not, we say so.
Spring press.
A button that sinks when you press it, then springs back a little past its size before it settles.
- Press: 120 ms on an ease-out curve, down to 92 %exact
- Release: a 900 ms spring, written as a
linear()curveexact
reva look http://localhost:5173/examples/spring-press/ \
--do click --el .press --card --allow-cdnBlur stagger.
Three lines rise out of a blur on load, each a short step behind the one above.
- Each line: 1000 ms, rising 36 px out of a 14 px blurexact
- One line every 90 ms, in reading orderfitted
reva look http://localhost:5173/examples/blur-stagger/ \
--do load --el .ln --card --allow-cdnWhere the reading differs
REVA gives the group a delay of 210 ms. That is the second line's delay; the first line starts at 120 ms. Every other value matches.
Pinned story.
A stage holds still while you scroll; its words change in three steps and a curve draws itself with the scroll.
- Pinned from 900 to 3600 px of scrollfitted
- The curve draws from 1710 to 2790 px, in step with the scrollfitted
- Each step's words: 600 ms on an ease-out curveexact
reva look http://localhost:5173/examples/pinned-story/ \
--do scroll --card --allow-cdnWhere the reading differs
The small dots along the curve appear 30 ms apart. REVA could not recover that step, because the group also holds the two end circles, so it marks the step unknown instead of guessing. The pin is read on the curve; on the stage itself its start is unknown.
Smooth scroll with parallax.
The page follows your wheel a moment behind and eases to a stop, with layers that move at their own speed.
- The page follows with a time constant of 158.2 msfitted
- It closes 5.13 % of the gap on every 120 Hz framefitted
reva look http://localhost:5173/examples/smooth-parallax/ \
--do scroll --card --allow-cdnWhere the reading differs
The smoothing law matches what we built to the decimal. Two things do not: REVA prints the 60 Hz share as 0.1054, where 0.1000 is right for that time constant, and it reports the two parallax layers with the page's smoothing rather than their own speeds.
Card hover lift.
Cards that rise a little when you point at them, while their shadow grows, and sink back when you leave.
- Lift: 10 px in 500 ms on an ease-out curveexact
- Shadow: both layers and their strength, on the same timingexact
reva look http://localhost:5173/examples/hover-lift/ \
--do hover --el ".card:first-child" --card --allow-cdnEach page ran on this machine and was read with the command shown beside it, on REVA's virtual 120 Hz clock. The pages load the Archivo font from Google Fonts, which a look on a local page blocks unless you add --allow-cdn. Every card here is the file REVA wrote, unchanged.