Six restrained ways to bring Projects. to life.
Six treatments applied to the same section title — "Projects." — as it enters the viewport. Each strip alternates with "Essays and Insights." so you can feel each motion against two different rhythms. Two faded ghost rows sit below for habitat. None of these uses parallax, scrub-tied transforms, or scale changes — those would clash with the editorial register.
Each character fades in independently with a 28ms stagger. No motion, only opacity — quiet, like type being set one piece at a time. Best when the title is short.
Title appears immediately; a 2px sapphire rule draws beneath it from 0 → 100% width over 1.1s. Quiet emphasis, like underlining a chapter heading.
Essays and Insights.
The title slides up from behind an invisible horizontal mask. Most cinematic of the six; reads like a subtitle dropping in. Bauhaus / film-titles energy.
Projects.
Title starts at light weight (300) and 42% opacity, settles to bold (800) and full ink as it enters the viewport. Like print being pressed onto the page. Most "Early Spring."
Essays and Insights.
A faded Roman numeral fades in to the left of the title, then the words drop in 180ms behind. Editorial, like book-chapter openings. Numerals are dim sapphire (var(--faint)).
II. Projects.
The words appear first; the period drops in 700ms later with a brief sapphire pulse, then settles to faded ink. Plays on the recurring "." that ends every Early Spring section title.
Essays and Insights.
Each word fades in with an 80ms stagger. The most direct sibling of the section-title chars treatment — same opacity-only logic, larger grain to suit the longer headline.
Each line fades in with a 250ms stagger. Two lines, two breaths. The most restrained of the six — almost imperceptible if you're not looking for it.
Letters fade in left-to-right at 28ms per char, but each comma adds a 200ms pause. Visualizes the punctuation rhythm — how the sentence is meant to be spoken.
Same chars-with-stagger pattern, but each character also rises 8px as it fades in. Adds vertical motion without becoming bouncy or playful.
The non-em phrase fades in chars first; the em-tagged "or the weather." waits 500ms before starting its own char stagger. Plays on the existing dimmed-em pattern as a delivery device.
Mirrors the section-title treatment — chars fade in left-to-right; the trailing period (yellow) gets a brief scale pulse as the rest settles. Most consistent with the rest of the page.
Pick one — or two for two sections.
You could even use different motions for Projects vs Essays — e.g. 04 · Weight settles in for Projects (the louder, business-of-the-page section) and 02 · Underline draws for Essays (the quieter, more editorial side). Or pick a single one and use it across the site for consistency. All six respect prefers-reduced-motion.