K13 DNA

Every above-the-fold block starts at opacity 0, translateY(26px). An IntersectionObserver (threshold 0.16, rootMargin "0px 0px -8% 0px") adds .in once, then unobserves, so it never re-fires on scroll-back. Hero elements are force-revealed after a 160ms timeout instead of waiting on the observer, so the first paint isn't empty.

The only truly looping animation on the page. A ring of success-green box-shadow expands and fades around the "Open for projects" dot, forever, on a 2s cycle. It is the one place the site allows itself to feel "alive" while sitting still.

The moment the contact stepper hands off to mailto:, a checkmark ring scales in from 40% with a fade. Runs once in production; looped here alternate for the demo.

Past 30px of scroll, the header tightens its padding and its translucent, blurred background fades in. Both are plain CSS transitions triggered by a class toggle, no scroll-linked animation.

The hero's "Currently…" line cross-fades through a shuffled list of ~40 one-liners every 3.8s (420ms fade). A visible, focusable Pause toggle sits as a DOM sibling of the card, not inside it, because the card itself is aria-hidden="true" (a decorative ticker) and aria-hidden on a descendant can't undo an ancestor's. Under reduced motion the whole feed script bails early, and the CSS hides the Pause button, a control with no listener attached is worse than no control.

Three layers (a paper back-panel, the photo frame, the caption chip) sit at different data-depth multipliers (-.45, .08/.16, .16) and translate on the scroll position relative to viewport center, transform-only, GPU-friendly. An IntersectionObserver gates the scroll listener so it only runs while the portrait is actually visible.

Each question screen slides in from translateX(34px) with a fade, and slides the opposite way (-34px) when stepping backward past it, so going forward and going back read as different directions, not a mirrored animation.

The hero stat numbers (16 shipped, 10 live) count up from 0 once they scroll within 95% of the viewport, cubic ease-out over 1300ms via requestAnimationFrame. Reduced motion skips straight to the final number.

Name and email steps, minimal underline input, no box, no visible native outline, the underline itself becomes the focus indicator.

Step 1's "what are we building" choice, four stacked buttons instead of a select, each with a trailing arrow that nudges right and brightens on hover.

Progress dots along the top fill in as you advance; a Back link appears only past step 1; answered steps collapse into clickable summary chips ("Building: A brand site") so you can jump back without losing later answers.

The whole step body becomes genuinely inert, not just visually hidden, before the success panel takes over, and the panel's copy is honest about uncertainty: the code cannot know a mail client actually opened, so it offers a plain-text fallback address if nothing takes focus within 1.2s.

A hidden skip-to-content link reveals on focus. The house rule behind it is written into this repo's own CLAUDE.md: opacity:0; pointer-events:none does not remove an element from the tab order, and that exact mistake once shipped a stepper that told a visitor their message was sent when nothing had happened. Every inactive step now carries the real HTML inert attribute instead.

Uppercase mono kicker with a 24px accent rule leading into it, ahead of nearly every section title.

The single recurring emphasis device: one word per heading set in Fraunces italic 500 and the accent color, "feels obvious," "real products," "worth building." Never bold, never all-caps, for emphasis inside a heading.

Every major band after the hero opens with a single 1px --line rule instead of a background color change or a shadow, the page reads as one continuous sheet of paper, not stacked cards.

A fixed, page-wide layer of faint dotted "plan paper" (30px grid, legacy-orange dots at 14% opacity, radially masked so it fades toward the bottom) sits under three large, heavily blurred wash blobs. Both layers are position:fixed, z-index:0, and never animate, the atmosphere is static texture, not motion.

Mono two-digit numbers (01, 02…) label both the Approach cards and the Work index rows, the site's one recurring "ordered list" motif, always mono, always accent or faint, never a bullet or an icon.

One hue carries every interactive and emphasis surface on this page, links, CTAs, eyebrows, the wordmark's "13," hovers, focus states. Success green is the sole sanctioned exception, reserved for confirmation only (the status dot, the sent-form ring). This also follows a K13-wide rule from the studio's own brand canon: never a colored strip down a card's left edge, it reads as generic template AI work. Where this site wants a card to carry color, it tints the whole tag (approach card's tint bar) or the whole page (the wash blobs), never a left border.