shadcn.io is not affiliated with official shadcn/ui
Trust Score Login Block for Svelte
A sign-in score simulator: four demo switches fill a circular meter in steps of 25 and decide the check, none above 75, a code from 50, an approval below, with a sketch of that check.
Installation
Overview
Show how little a trusted sign-in needs to ask, with this trust score login block for Svelte with Ark UI. It's the sign-in of Gearfern, a used-gear marketplace: a whole screen with the page's rails and one band across it, a centred header over two columns on wide screens and the result first on phones. The result column holds the one ring in the set, a Circular Progress filling to the score with the number in its middle, the check Gearfern would ask for as a word with a glyph (no extra check, a code by email, or approval on your phone), a still sketch of that check and the one Shine Button, whose label follows the check. The other column holds four demo Switches (a known device, a usual place, the office network, usual hours), each worth 25 points and said in words, and the ladder that turns a score into a check. Flipping a switch re-reads the score, the check and the sketch at once. It's built from Circular Progress, Switch, Button, Shine Button and Guides, with a CSS entrance only. For sign-ins that ask for more only when trust is low.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The four signals are demo switches and the score is a pure function of them: 25 points for each one that holds. Nothing reads your device, place or network, and pressing the button waits half a second and says what a real product would do without doing it. In a product, compute the signals on your server at sign-in and decide the check there; a browser must never report its own trust.
How does a score become a check?
Through the ladder listed under the switches: 75 and up asks for nothing, 50 to 74 for a code by email, and below 50 for approval on your phone. The thresholds and the weight are constants at the top of the file, so you can change them in one place; the current row of the ladder is set in bold.
Is the ring accessible, and does it move?
The ring is decorative: the score and the check are plain text beside it, and the page's status line says the new verdict once the switches have rested for 600 milliseconds. The ring eases to its new value, and under reduced motion it jumps instead.
How is the check told apart without colour?
By a glyph (a tick, a key, a phone), the check's name in words and the sketch under it: nothing, six empty slots for a code, or a phone tile. The ring is a single foreground tone.
What does the button do?
Its label follows the check: Sign in, Send me a code or Ask my phone. Pressing it shows a short busy state and then says what would happen next ("A code would be emailed. Nothing was sent."). Changing a switch clears that line, and Reset puts the four switches back as they opened.