Motion

Three durations, two easings, a handful of CSS primitives, and one rule that turns all of it off. No animation library and no JavaScript.

Reduce motion (the same rule as the system setting)

01 Tokens

Five values for every animation

02 Primitives

Things entering on load: a hero record, a sticker. 700ms, standard easing.

Small marks that arrive: a label, a stamp. 300ms with a small overshoot.

Fades and rises as it scrolls into view, driven by the scroll position (animation-timeline: view()). Shown at once where unsupported.

This card used the reveal utility as it scrolled in.

Fades in when an element appears: tab panels, opened menus and answers, prices after the billing switch. Uses @starting-style, no JavaScript.

Switch a tab to see it enter

Audience Charts

Lenny’s Podcast: 532K listeners a month, estimated.

Lenny’s Podcast: #26 on Apple Podcasts · Technology · US.

How accurate are the listener estimates?

They’re estimates, not download counts. Each one comes with a confidence level and the signals behind it.

Which shows have transcripts?

7.4M episodes so far, with the biggest shows first. You can request a transcript for any episode and we’ll add it.

Hover for a card that is a link: it rises into its offset shadow. 150ms.

Charts draw their line once and bars grow from the left, on load. Data marks only.

Audio 391K YouTube 140K

03 Rules

Nothing the reader needs is hidden until an animation finishes; every element is readable in its first frame.
Animate transform and opacity only, never layout (width, height, top).
No page transitions (decided 2 Oct 2026) and no animation libraries.
Loops (product scenes) run at --duration-loop and stop under reduced motion.
Every animation uses a duration and easing token; none uses a raw value.