Skip to content
native cook
Esc

Loading the catalog…

Shield Password Strength


A sign-up password field on a very light blue-grey screen: a cyan shield with a white keyhole inside a large soft glow, and under it the label "Password", a white pill field with the password as small dots, an eye to show it and a padlock, and one small line of hint, "Enter Your Password". As the password gets stronger the shield and its glow go pale and come back in a new colour, red for weak, burnt orange for fair, green for strong, while the label and field dim for a moment and the hint clears and retypes itself letter by letter ("Add more characters to strengthen it", "Nice, try adding a symbol", "Perfect! Strong & secure"); a strong password also gives the field a thin green outline. Submitting a strong password fades the label, field and hint away, the shield glides down to the middle of the screen with its glow, and its keyhole dissolves into a white check with a small pop.

Category
Forms
Added
Oct 12, 2026
Stacks
RN · Swift · Kotlin

Is this your design? Ask for a correction or removal

React Native · Expo SDK 52+, TypeScript

✦ If the result drifts from the video, tell your agent what looks different and how it should look. A short correction usually closes the gap.