Skip to content

No.213 · Authentication

QR Handoff Sign-in

Sign in by pointing your phone at the screen: the code's frame carries the instructions and time left as a ticker round its edge, a scan sends a ripple out through the code, and approving turns it over to a check.

The prompt

The design brief behind this component — reuse it to regenerate, remix, or explain it.

Build a 'Sign in with your phone' card around a 248px square frame: a 26px band with 30px corners, and inside it the code on light paper (phones need contrast in either theme). The band carries a ticker: an SVG rounded-rect loop through the middle of the band, with mono capitals ('SCAN WITH VITRINE · EXPIRES IN 1:58 · MUSCAT · ENCRYPTED ·') repeated to one lap, spread with textLength, in two textPaths one lap apart whose startOffset advances in requestAnimationFrame at 26px/s, easing to 4px/s while the pointer is over the frame. Its words change with the state, and it takes the accent colour after a scan and green after approval. States: waiting → scanned → approved, or expired after the TTL (120s, counted down in the ticker). Accept a 'code' prop for your real QR SVG; without one, draw a stand-in with QR anatomy (three finders with separators, timing lines, seeded data — not readable) as one rect per module. Each module has --d, its distance from the centre. A new code fades its modules in from the middle (22ms per module of distance). A scan runs a ripple outward (34ms per unit): each module shrinks to 35% in the accent colour and springs back, then the code dims while a ring breathes from the centre, 'Approve on Hamza's iPhone'. Approval flips the card (rotateY 180°, slight overshoot) to a green back face whose circle and check draw in. Expiry blurs the code to 12% and shows a 'Get a new code' button. Under the frame: a role=status line explaining the current step, optional demo buttons, an 'or' divider and 'Sign in with email instead'. Night and Paper.

Notes

Interaction
Hover the frame to slow the ticker. In the demo, press Simulate scan, then Simulate approve, or Expire now and Get a new code.
Motion
Ticker 26px/s easing to 4px/s; fade-in 420ms, 22ms per module; ripple 760ms, 34ms per module; flip 900ms; check draws after.
Accessibility
The code is a role="img" with a label; the ticker is aria-hidden and every fact in it is repeated in the role=status line, which also announces each step. The email fallback is always present. Reduced motion stops the ticker and makes every change instant.
Responsive
The card is up to 24rem and the frame is a fixed 248px, which fits a 320px screen.
On touch
The ticker keeps its normal speed; everything else is the same.

Featured

01Glassbreak ButtonA solid plate that fractures from one impact point, cracks racing outward as the shards drift apart.04Liquid GlassA capsule of glass that bends what's behind it, carries a specular highlight around its rim toward your pointer, and squashes like a drop of liquid when pressed.07Phosphor Glass ButtonA liquid-glass pill that senses you coming: its rim light turns to face the cursor and the pill leans in to meet it.08Iris ShutterAn async button with a camera iris for a status light — blades close and turn while it works, then open onto the result.
81Atmosphere CardSmoked-glass link cards: colour pooled in the corners, slow contour currents underneath, a field that leans toward you.93Eclipse Event CardAn editorial event plate with an oversized date and an orbital eclipse bleeding in from the right, alive with slow drift.94Specimen CardAn object mounted under glass: hover lifts the pane with a sweep of reflection and swings out a paper catalogue tag.
95Silk FieldDomain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.106IsobarA living weather map — contour lines traced over a drifting pressure field, with your cursor as a system of its own.
151Prompt ComposerA chat composer where attached files tuck into its top edge like tabs in a folder — they rise from behind it when added and sink back when removed. Send turns into stop while the reply streams.157Aura FieldA writing field where colour only exists while the AI is touching your text: the edge becomes a turning band of light and the words are rewritten in place, one by one, out of a soft blur.
205Halftone CTAA tall CTA banner where slow gold paint drifts beneath a fixed halftone grid, visible only through the dots.
212Nocturne Sign-inA single quiet column on near-black with a breathing seam of frost light behind it — email, password, magic link, nothing more.222Sigil Sign-inA split sign-in whose left half grows a geometric mark from your email — the same address always draws the same sigil.
275Voices CarouselA testimonial exhibition: one large quote at a time on frosted glass, crossfading between voices without ever resizing.
279Feral TitleA brutal condensed wordmark — heartbeat in the dark, letters slam in, a gash tears through and the word bleeds.
301 components