Kinetiq

KQ-691 · SELFIE/RING

Selfie Ring

A liveness check drawn as a ring around a procedural face. Each prompt slides up into the caption on snap while the ring fills one more segment on glide, and the face answers: features glide left or right, the eyes blink on a tween. Passing the last prompt closes the ring: the arc completes, the ring tightens onto the face on recoil and a check disc stamps at the top; failure drains the ring on glide with no bounce. The ring is a progressbar whose valuetext names the prompt, one real button starts or retries the check, and the host advances step and status so the ring owns no clock.

KQ-691 · SELFIE/RING
Basinworks Exchange · confirm withdrawal0/4
Ready when you are

ready · 0 of 4

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/selfie-ring

Props

prompts
string[]
default ["Centre your face", "Turn left", "Turn right", "Blink"]
The prompts in order, one ring segment each; prompts that mention left, right or blink move the face.
status / defaultStatus
SelfieRingStatus
default "idle"
idle, checking, passed or failed.
onStatusChange
(status: SelfieRingStatus) => void
default —
Fires from the Start and Try again presses with checking.
step
number
default 0
Index of the prompt being held while checking; earlier prompts count as done.
onStart
() => void
default —
Fires from the Start or Try again press; the host runs the camera check.
label
React.ReactNode
default —
Visible heading; omit it and pass aria-label.