# Cryostat Password Dial

> A real-time password strength meter styled as a cold-lab precision instrument — strength charges a 270° radial SVG gauge whose arc shifts across the semantic weak-to-strong ramp, with a live 0–100 readout, an animated requirement checklist, and a visibility toggle.

- Category: Password
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Roastery
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: validation, radial, form
- Page: https://builder.atheros.ai/components/radial
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_radial/preview-b2768f4f318a.webp

## Features

- Radial strength gauge drawn as a runtime SVG — a 270° arc with rounded caps, a graduated tick ring, and a traveling tip
- Arc fills smoothly via a registered `@property --gauge-fill` driving `stroke-dashoffset`; the numeric score tweens with a requestAnimationFrame counter
- Center read-out shows a grade caption (Standby / Low charge / Charging / Certified), a live `0–100` score, and a strength label pill (Weak / Fair / Good / Strong)
- Semantic strength ramp — rose → amber → lime → emerald — recolours the arc, ticks, tip, and label as the score climbs, with a light + dark lume twin per grade
- Entropy-aware scoring: length curve, character-class coverage, uniqueness, plus penalties for common passwords, keyboard runs/sequences, and repeats
- Requirement checklist with a spring "pop" as each rule ticks; a contextual hint explains the next best improvement
- Password visibility toggle with eye / eye-off Tabler icons and `aria-pressed`, plus a caps-lock warning
- Submit button gated until a strong reading, with disabled → armed → certified states
- Accessible: `aria-live` score/label announcements, focus-visible indicators, reduced-motion support
- Responsive: gauge scales and the rule grid collapses to one column on very narrow viewports

## Accessibility

- **Strength region** — The dial and its tweening readout are `aria-hidden`; a single visually-hidden `aria-live="polite"` region announces the settled grade, label and score once per update
- **Visibility toggle** — `<button>` with `aria-label` and `aria-pressed`
- **Caps-lock hint** — Surfaced from `getModifierState('CapsLock')`, hidden by default
- **Input label** — `<label for>` association plus `aria-describedby`
- **Contrast** — Score/label/hint/rules/field/submit all clear WCAG AA (≥4.5); the arc clears ≥3:1 vs its track in every design system and theme
- **Focus indicators** — `:focus-visible` with `--ring` / accent outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations including the arc sweep

## Keyboard shortcuts

- `Enter / Space` — Activate the focused button — toggle password visibility or certify

## Common questions

**Which frameworks is Cryostat Password Dial available in?**

Cryostat Password Dial ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Cryostat Password Dial free?**

Cryostat Password Dial is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Cryostat Password Dial support dark mode?**

Yes. Cryostat Password Dial ships light and dark themes, both drawn from the Roastery design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Cryostat Password Dial live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/radial

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt