TextReveal
A headline that assembles itself reads as arriving rather than as having always been there — the difference between a page that loaded and a page that greeted you.
0.05s
Bench · 10 benches · everything live
Lab
Everything the site is built from, live. Drag the controls.
Every demo on this page imports the same component the site itself uses. Nothing here is a screenshot, a video, or a copy — if it changes here, it changed everywhere.
Move your pointer across it. Press it. Nothing here is on a timeline — the liquid is following you.
For the best experience use a desktop or laptop. The hover and cursor benches need a pointer, so they are not here — everything below runs properly on a phone.
01
Motion
Reveal
A long page that arrives all at once gives the eye nowhere to start. Sections landing a beat apart tell you the order to read them in without a single instruction.
16px
0.6s
CountUp
A number that lands already final is read as a label. One that counts is read as a measurement, which is what makes a price or a score feel like it came from somewhere.
1.6s
0
Marquee
A row that never stops moving says the list continues past the edge of the screen. A static row of six logos says there are exactly six.
30px/s
Parallax
Layers moving at different rates give a flat page depth, which is what stops a long scroll feeling like one continuous sheet of paper.
Scroll the page to see it — the position is driven by this stage’s progress through the viewport, not by a timer.
80px
02
Icons
03
Scroll
04
Glass
05
Controls
06
Feedback
07
Analytics
08
Type & tokens
Two more benches — hover and cursor — are waiting on a laptop.