The copy button
Buttons, Text, SVG, Physics
NewFree
All components
The password field
A field for a new password with the characters drawn over a real input: hidden, every letter is a little star that spins in, and the last one typed shows for a moment while the eye at the end peeks; the eye opens and the stars turn back into letters one after another, its iris following the caret, and four bars and four rules underneath say how strong it is.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The password field</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/rubik@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the password field: a real input under drawn characters (stars when hidden, letters when shown), an eye that
shows and hides them, four bars for the strength and the rules ticking themselves off -->
<div class="pw" data-pw data-autoclic>
<label class="pw__label" for="pw-input">Choose a password</label>
<div class="pw__field" data-field>
<input class="pw__input" id="pw-input" type="password" autocomplete="new-password" spellcheck="false" autocapitalize="off" autocorrect="off" aria-describedby="pw-strength pw-rules" data-input>
<div class="pw__row" aria-hidden="true" data-row>
<div class="pw__chars" data-chars>
<span class="pw__sel" data-sel></span>
<span class="pw__caret" data-caret></span>
</div>
</div>
<button class="pw__eye" type="button" aria-controls="pw-input" aria-pressed="false" aria-label="Show password" data-eye>
<svg viewBox="0 0 32 32" aria-hidden="true">
<defs><clipPath id="pw-eye-clip"><path data-eye-clip/></clipPath></defs>
<path class="eye__white" data-eye-white/>
<g clip-path="url(#pw-eye-clip)">
<g data-iris>
<circle class="eye__iris" cx="16" cy="16.5" r="4.8"/>
<circle class="eye__pupil" cx="16" cy="16.5" r="2.1"/>
</g>
</g>
<path class="eye__line" d="M4 16Q16 26 28 16"/>
<path class="eye__line" data-eye-lid/>
<path class="eye__lashes" d="M10 19.75 8.4 22.5M16 21v3.2M22 19.75l1.6 2.75" data-eye-lashes/>
</svg>
</button>
</div>
<div class="pw__meter">
<div class="pw__bars" aria-hidden="true" data-bars><span><i></i></span><span><i></i></span><span><i></i></span><span><i></i></span></div>
<span class="pw__word-clip"><span class="pw__word" id="pw-strength" aria-live="polite" data-word>Strength</span></span>
</div>
<ul class="pw__rules" id="pw-rules" data-rules></ul>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
14 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The password field” from Animorio and fit it into my siteWhat it does
On a white background the words Choose a password, a grey field with rounded corners and, at its end, a closed eye, asleep with its lashes; under it, four grey bars with Strength on the right and four rules in two columns with empty boxes: 8 or more characters, An uppercase letter, A number, A symbol. Clicked, the field turns white with a violet border and a halo. Typing, each character shows its letter rising from below and the eye opens a slit; a moment later, or as soon as the next key comes, the letter tips over and a six-armed star spins in in its place. The violet caret follows the characters and blinks when still. The bars fill from the left, red with Weak, orange with Fair, green with Good, deep green with Strong, the word rolls over and the rules met tick themselves green with a little bounce; turning Strong, a shine runs across the bars. Clicking the eye, it opens with a little overshoot and the stars turn back into letters one after another from the left while the row widens to their widths; open, the violet iris follows the caret along the field and now and then the eye blinks. Clicked again, the letters turn back into stars from the right and the eye closes with its lashes. Deleting, the characters shrink away and the others slide over to close the gap.
How it works
The real field, invisible
The input (type password, autocomplete new-password) covers the whole field with its characters and caret transparent (color and -webkit-text-fill-color transparent, caret-color transparent): keys, pasting, password managers and selecting work by themselves. The script reads the value and the selection on every frame of GSAP’s ticker (and on every input) and draws what it finds.
What changed
At every change it compares the characters before and after (the same start and the same end): only those in between go out and come in, the others slide to their new place. Hidden, every character takes 16 pixels; shown, its own width, measured once with measureText on a canvas in the field’s font (and again when the fonts are ready).
Stars and letters
Every character has two faces, the letter and an SVG star of three crossed lines. Hiding, the letter tips over with rotationX 90 and fades while the star spins in from −140 degrees with back.out; showing, the opposite. One after another, WAVE seconds apart: from the left when showing, from the right when hiding. A key typed while the password is hidden shows its letter for PEEK seconds.
The eye
The upper lid is a quadratic curve whose control point goes from 26 (on the lower lid: the closed eye, with three lashes) to 4 (open); the same curve makes the white of the eye and the clipPath that cuts the iris. Open, the iris looks at the caret (far left at the start of the field, nearly straight ahead at its end), smoothed frame by frame, and every BLINK seconds (at random between the two) the eye blinks; with the password hidden, a letter showing opens it by a third.
The strength and the rules
There are four rules: at least MIN characters, an uppercase letter, a number, a symbol. The score gives a point for MIN characters, one for MIN + 4 and one each for two, three and four kinds of character, between 1 and 4 (only Weak under 6 characters or with a common password inside). The bars turning on fill from the left (scaleX with expo.out), those turning off empty from the right, the word rolls and the ticks draw themselves with stroke-dashoffset. With a mouse the caret goes where the drawn characters say; a click from a script (the library’s preview) types, shows, lengthens, hides and wipes a password without taking the focus.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
PEEK | script.js | 0.7 | The seconds a character just typed shows its letter before it hides (0: never). |
WAVE | script.js | 0.035 | The seconds between one character and the next as they turn, showing or hiding. |
BLINK | script.js | [3, 6] | How many seconds go by between the open eye’s blinks, at random between the two. |
MIN | script.js | 8 | The characters a password needs at least. |
When to use it
When signing up to a site, changing a password, in a members’ area: anywhere a password is chosen and it helps to say straight away whether it is enough.
On phones
The field takes the width of the screen; a tap opens the phone’s keyboard and puts the caret where it touched. The eye is a 44-pixel button and the rules stay in two columns.
With reduced motion
Stars and letters swap without turning, the characters appear and disappear in their place, the eye opens and closes without animation and does not blink, the caret does not flash; the bars and the ticks fill at once.
Pitfalls
- A password field hides its characters in its own way: to draw them, the real field is left on top with its characters transparent and what it holds is drawn underneath. The caret must be hidden too (caret-color) and so must the selection (a transparent ::selection).
- A mouse click would put the caret by the field’s invisible characters, which are wide in another way: the mousedown is stopped (preventDefault) and the caret goes by the drawn characters; with a finger, where it touched, after the click.
- Changing type (from password to text and back) the field may lose its selection: it is read before and put back after.
- A letter made of two units (an emoji, for one) has to count as one: the comparison is made on letters ([...string]) and the field’s positions are converted.
Libraries
GSAP 3.15.0, Rubik (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 9.4 KB; the libraries: GSAP 28 KB.
Testing
Tested on 3 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
