The page and its motion

The landing page is the app: its input starts a real claim. The claim page is four steps down a line. Neither decides what state a claim is in, with one deliberate exception.

Three pages, one layout around them

app/layout.tsx wraps all three in the same things: the query client and MotionConfig from components/providers.tsx, the globe (Stage), the header, and the service worker's registration. The globe is in the layout so it's created once and survives a route change.

The page reads the phase and never decides it

Everything on the claim page comes from one response, ClaimDetailResponse. The server derives view.phase with toClaimView, and the page lays the steps out to match. The headline, the reason and the fix are core's words. So the UI can't disagree with the engine about what's happening.

The one exception, and why

// apps/web/components/claim/phase.ts
export function isWaitingForRecord(view: ClaimView): boolean {
  return (
    view.phase === "fix_needed" &&
    view.outcome.kind === "not_found" &&
    view.outcome.reason === "nothing_at_name"
  )
}

export const shownPhase = (view: ClaimView): Phase =>
  isWaitingForRecord(view) ? "add_record" : view.phase

To the engine, "nothing at the name" and "added wrong" are the same kind of answer: a check ran and didn't pass. To a person they're opposite experiences. The engine's answer stays as it is, because it's true. The page chooses how to say it.

How the page stays current

The page polls. While proving, something can change without this browser doing anything: the worker re-checks, or a helper adds the record.

Pressing a button doesn't wait for the next poll. Check, new code and stop are mutations whose response is the whole claim again, and apply writes it straight into the cache.

The field that travels

The domain field is a shared elementOne element given the same name on two pages, so the browser animates it from its old position to its new one.. It's named on both pages, so the browser's View Transitions API moves it from the hero to step one. That only happens if the destination renders it in the same commit as the navigation, which is why the claim is put in the query cache first.

The motion rules

Reduced motion is a first-class path

Four ways to add the record

MethodPicker in components/claim/methods.tsx is a real radio group, so arrow keys move between the options and a screen reader announces the position. The pane underneath swaps with enter inside an AutoHeight.

Small choices in the landing form

• It accepts what people paste. A URL, an email address or a www name is tidied by normalizeDomain when you leave the field, and a line under it says what changed.
• The field starts as a button. The hero offers two choices, Verify a domain and the CLI command. Pressing Verify opens the field and moves the cursor into it, on any device, because now someone has asked for it. Escape in an empty field closes it and puts focus back on the button.
• The closing button opens it from far away. FocusDomainButton scrolls up and dispatches OPEN_DOMAIN_FIELD, a window event the form listens for, since the field may not exist yet.
• The input's text is 16px. Anything smaller makes iOS zoom the page on focus.
• The message line is always there. It has a minimum height, so a message appearing never pushes the page down.
• A problem shakes the field, next to the message that says why. It's a transform, so nothing reflows.
• The CLI command is marked Soon. npx prufy verify isn't published, and copying it says so.

From button to field

The shell and the Verify button are the same elements before and after. Motion's layout animationMotion measures an element before and after a React render and animates the difference with transforms, so a change of size or position glides instead of jumping. animates the change with one no-bounce spring (MORPH, 0.55s), so the button slides to the end of a field that opens out of it. These are the numbers measured in the browser at 1440px wide:

• The command leaves at once. It exits in 220ms under AnimatePresence mode="popLayout", which takes it out of the layout immediately, so the field can grow into its space while it blurs away.
• The field's contents wait. The globe icon, the input and the tick fade in from a 4px blur after 140ms, so they don't ride along while the shell is still growing.
• Corners stay round. The radius is inline in pixels (16, then 12 for the button). Motion can only correct a pixel radius while it scales a box. A class radius would stretch.
• Closed, the row is 38rem; open, the field is 34rem. The two buttons need 583px side by side.

The headline's shine

Taken from react.email by reading its CSS in the browser. A copy of the headline sits exactly over it, aria-hidden and unselectable, with transparent text. Its background is a 45° gradient that's clear except for a thin white band, sized 225% and clipped to the letters with background-clip: textbackground-clip: text. The element's background shows only inside its text, so a gradient paints the letters instead of the box.. Moving background-position from 110% to 0% carries the band from just off the left edge to just off the right: 1.5s, ease-in-out, starting 0.8s in, once the headline's rise has settled. It plays on every load. On a repeat visit in the same session the entrance is skipped, so the shine starts at 0.3s instead. Only reduced motion turns it off.

Status is never colour alone

PhaseBadge always renders a text label, and the colour only reinforces it. The three track nodes in the check panel each carry a word under them: Not yet, Looking, Found, Waiting, Needs a fix. The active step has aria-current="step", and a result changing is announced with role="status", or role="alert" when there's something to fix.

The decision is in docs/decisions/0010-the-landing-page-is-the-app.md.