ns-ui

Password Strength Tide

Password field with a canvas water tank behind the masked text: entropy raises the tide on a damped spring, keystrokes slosh a real 1D heightfield wave, deletions pull the level back down.

Use when a password field specifically — a canvas water tank behind the masked text where entropy raises the tide and keystrokes slosh a real wave; use when strength itself should be legible, not for general text input.

Install

npx shadcn add https://design.helpmarq.com/r/password-strength-tide.json
  • input
  • password
  • form
  • canvas
  • physics
  • micro-interaction

ns-ui / password-strength-tide — entropy raises the tide

Create your account

Type a password and watch the tank fill. Every keystroke sloshes the surface; deletions pull the tide back out.

12+ characters mixing case, digits, and symbols reaches Strong.

Already registered? Sign in

Water level tracks charset entropy on a damped spring. Toggle the eye to drop a ripple at the icon; strength is announced politely to screen readers.

Props

PropTypeDefaultDescription
label?string"Password"visible label text above the field
name?string"password"—
placeholder?string——
defaultValue?string—uncontrolled initial value
value?string—controlled value; omit for uncontrolled
onValueChange?(value: string) => void——
autoComplete?string"new-password"—
required?booleanfalse—
disabled?booleanfalse—
className?string——
Back to the catalog