RChursin_ · Finishing
The small things that make it feel expensive.
Nobody notices one of these on its own. Together they are the difference between something built and something made. Everything on this page is the real component, so hover, press and scroll.
02 · Surfaces
Four heights, one light.
Every step up the scale keeps the same light and the same offset-to-blur ratio, so surfaces stack without arguing. In the dark, height is a lighter surface with a lit top edge.
03 · Controls
Things you touch should feel touched.
Fields sit slightly into the page and glow when you focus them. The slider has a lit pearl of a thumb. The tab highlight glides instead of jumping.
npx rchursin scanThe pill glides here in 500ms.
An in-out curve, because it moves while on screen.
Use the arrow keys too.
04 · Motion
Quick to answer. Slow to arrive.
Three curves do all the work. Press Play to feel the difference against the browser default.
ease-lux · 450ms
Hovers, presses, menus. Quick to answer, soft to land.
ease-lux-expo · 1100ms
Arrivals and count-ups. Long and calm.
ease-lux-spring · 700ms
One-off landings, like the stamp. 1.5% overshoot.
ease (browser default) · 450ms
For comparison. Rushes the start, drags the end.
If your system asks for reduced motion, the squares jump straight to the end.
- Press
- 90ms
- Hover in / out
- 160 / 450ms
- Arrival
- 900–1100ms
- Stagger
- 70ms a step
05 · Type
Tighter as it grows. Wider as it shrinks.
Geist has no optical sizes, so letter-spacing does that job: big words pull together, small capitals open up. Numbers always line up.
Display
84px · 500 · −0.05em
Frame what works.
Heading
40px · 500 · −0.025em
Usage isn’t usefulness.
Body
18px · 400 · 0 · 65ch
Short sentences, plain words. Lines stop at about 65 characters so the eye never loses its place.
Label
Mono 11px · 500 · +0.14em · caps
Fig. 2 · Tokens per turn
Figures
Tabular · −0.04em
$1.84 · 212 · 8,000
06 · Moments
A little magic, used sparingly.
Each page gets at most one signature moment. Here are all of them, with two you can try right here.
Every header
The cursor in the logo
Hover the logo and its underscore blinks three times, like a cursor waiting for you.
Closing panels, Home 04
The frame draws itself
The L grows out of its corner, then the square settles in. The logo, assembling.
Home 03 receipt
A stamp that lands
The verdict arrives with a small spring, as if pressed by hand.
Figures on 01 and 03
Numbers that count once
They rise from zero the first time you see them, then stay still.
Home 04 hero
A lens of light
The field of skill names surfaces word by word, and a soft light follows your pointer across it.
Every header
Glass that appears when needed
Clear at the top of the page. Frosted, with a hairline, once you scroll.
Product shots, Magic UI
One lap of light
The border beam runs once when it arrives and again when you hover. It never loops on its own.
Cards on every page
A pool of light under the cursor
Cards lift two pixels and catch a soft light where your pointer is.
The rules
Restraint is the luxury.
- One light, from above
- Every highlight sits on a top edge, every shade on a bottom edge. Nothing contradicts it.
- Quick to answer, slow to arrive
- Presses take 90ms and hovers 150ms. Things entering the page take 900–1100ms. Exits are faster than entrances.
- Hairlines before shadows
- Depth comes from 1px rings and surface tone first. Shadows stay faint and soft.
- Nothing loops forever
- Shimmers run once or twice. The cursor blinks four times. Only the run wall moves on, and it has a pause button.
- Motion is optional
- With reduced motion on, every arrival, slide of light, spring and count-up is skipped and the content is simply there.
- Black and white only
- Greys carry the hierarchy. No colour, ever, so the craft has to do the work.