Field notes

Learned,
not generated.

A year of building with AI, every day: sites, apps, dashboards, brand systems. These are the principles that kept the work from looking generated. Each note is shown, not told.

01 · taste

Slop has two floors.

First-order slop is convergence: the fonts, gradients, and glass every model reaches for by default. Second-order slop is subtler: the anti-slop vocabulary, serifs, numerals, editorial ornament, applied as a checklist with no idea behind it. Vocabulary is not taste. Taste is one organizing idea, then subtraction.

✨ Most popular
Studio plan
$79
Unlimited projects
Priority support
Custom domain

02 · judgment

The payload is the hero.

I once buried a working before/after slider under scroll choreography. The slider was the product; the choreography was the mechanism. If the most impressive thing on your page is the transition, the page is about the wrong thing. Flip the layout and watch the same content start selling.

An immersive journey into transformation.
scroll to experience ↓ ↓ ↓
03 · motion

Budget motion by frequency.

Rauno Freiberg's tradeoff: the more often an interaction runs, the less motion it can afford. A first visit earns choreography. A daily menu earns almost none. Same element below, two budgets. Novelty is an exclamation mark, not a sentence.

04 · motion

Linear is for robots.

Nothing physical moves at constant speed, so linear motion reads as mechanical. A curve that starts fast and lands soft reads as intent. Same distance, same duration, different ease. Race them.

linear
cubic-bezier(.16,1,.3,1)
05 · composition

Make the biggest thing unmistakable.

Below roughly 1.5 to 1, two type sizes read as indecision, not hierarchy. Real composition starts when the display size is obviously in charge. Drag the ratio and feel where timid ends.

Loud, once.
Body copy holds a readable size while the display line above takes the ratio.
06 · craft

Structure first, then the surface.

Every reveal on this site draws its guides before its ink, pencil before pen. Try it: draw on the pad and your stroke lands as a faint guide, then the ink chases your exact path a beat behind. Shown structure is why drawn motion reads as intent, not decoration.

Your hand, both passes
draw here
07 · craft

Numbers that hold still.

Any number that changes needs tabular figures, per the Web Interface Guidelines. Proportional digits reflow every tick, and that jitter is motion you never designed. One catch from the field: this site's display cut carries no tabular feature, so tabular-nums silently no-ops. The steady timer reserves a fixed advance per digit by hand. Check your font.

as shipped
0:00.0
fixed advance per digit
0:00.0
08 · access

Less motion, not less site.

A blanket reduced-motion early return once deleted my entire work index for RM users: the rows waited forever for an entrance that never came. Reduced motion means instant arrivals, never missing content. Toggle it and compare the two implementations.

if (RM) return;
content never arrives
instant arrivals
everything present, nothing moves