# Passkey setup with face-scan ring > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The last step of an onboarding flow in a fictional banking app, Wren, where the user creates a passkey. It uses an iOS 26 language: liquid-glass pill buttons and cards over a dark, softly lit background (teal light from the top left, ember from the bottom right). The centrepiece is a 216px ring of 72 ticks around a Face-ID-style glyph. When scanning starts the ticks light up mint one after another, the glyph nods left and right, and then the ticks dissolve into one solid ring with a check drawn inside it. The detail worth copying is that the headline, sub-copy and primary button all change with the ring's state, so the screen reads as one continuous conversation. ## Reference behaviour 1. Initial state (t = 0): ticks are 18%-white, the glyph is 68%-white, the state label reads "Ready", the headline reads "Sign in with a glance", and the primary button reads "Create passkey". 2. At 350ms the sequence auto-starts and enters **scanning**: ticks turn mint clockwise from 12 o'clock with a 22ms stagger (72 × 22 = 1584ms for the full sweep). The glyph brightens to full ink and does a 1.6s nod (−5px/−3° then +5px/+3°). A soft mint halo fades in behind it. The label reads "Scanning" in ink; the button turns translucent mint, reads "Look at your iPhone" and gets `aria-busy="true"`. 3. At 2200ms the screen enters **done**: ticks fade out with a fast 4ms stagger; the glyph scales to 0.7 and fades; a solid 5px mint circle (r 86) draws itself from 12 o'clock over 700ms (120ms delay); the check draws over 480ms (520ms delay). 4. In the done state the label reads "Passkey saved" in mint, the headline becomes "You're all set", the sub-copy names the saved passkey ("Wren · iPhone 17"), and the button reads "Continue to Wren". 5. Tapping the ring at any time restarts the sequence from step 1. 6. In the idle state, tapping "Create passkey" runs the sequence. In the done state, tapping "Continue to Wren" returns the demo to idle (in a real product it would navigate onward). 7. "Use a password instead" is a quiet text button below the CTA; "Skip" is a glass pill top right; Back is a 44px glass circle top left. ## Structure ``` 390 × 844 (status bar overlay drawn by the Lounge in the top 54px) ┌──────────────────────────────────────┐ │ 54px clear │ │ (‹) Step 3 of 3 · Security (Skip) │ 44 glass pills │ │ │ ╭ ┄ ┄ ┄ ┄ ┄ ╮ │ │ ┆ ⌜ ⌝ ┆ │ ring 216 × 216, margin-top 18 │ ┆ ˙ ˙ ┆ │ ticks r 96 → 106 │ ┆ ⌞ ◡ ⌟ ┆ │ │ ╰ ┄ ┄ ┄ ┄ ┄ ╯ │ │ ● Scanning │ 20 │ Sign in with a glance │ h1 30px │ Create a passkey for Wren on … │ sub, max 310 │ ┌──────────────────────────────────┐ │ │ │ [k] No password to forget │ │ glass card, 3 rows │ │ [s] Can't be phished │ │ │ │ [d] Syncs with your keychain │ │ │ └──────────────────────────────────┘ │ │ (flex spacer) │ │ ( ======== Create passkey ======== ) │ 56 │ Use a password instead │ 44 │ 34px clear │ └──────────────────────────────────────┘ side padding 20 ``` - `.app` is a flex column with `padding: 54px 20px 34px`; a `.grow` spacer pushes the CTA to the bottom. - `.bar`: three items, `justify-content: space-between`. Back and Skip are `