Guides · · Maxwell Prehoda
12 Login Page Animation Ideas That Make Signing In Feel Friendly
A login form has five moments where motion helps: focusing a field, typing a password, revealing it, getting it wrong, and getting in. The best login animations are tiny and tied to one of those moments. The worst ones make a returning user wait for a show before they can type.
Below are twelve ideas worth stealing, from Darin Senneff's famous Yeti avatar and its native and Rive descendants to the plain, proven patterns: Material's floating label, Codrops' input effects, the error shake, and a strength meter. Each says what it is best for, what it runs on, and the trap to avoid. Most come with a live pure-CSS demo from our directory that you can copy straight into your form.
1. Darin Senneff's Yeti login avatar: Best for a memorable sign-in for a playful brand
Platform: SVG + GSAP (CodePen and Dribbble)
The login animation everyone remembers. Front-end designer Darin Senneff drew a yeti above an email and password form: as you type your email its eyes follow the text along the field, and when you move to the password field it covers its eyes with its paws. It is an SVG character animated with GSAP, first shared on Dribbble and CodePen, and it has been rebuilt everywhere since, from Webflow to Bubble plugins to native iOS.
It works because the character reacts to exactly what you are doing and to nothing else. There is no intro, no loop to wait through. Every movement answers an input, which is why a mascot on a security screen feels charming instead of distracting.
Original versions used GSAP's MorphSVG plugin, which used to be a paid add-on. GSAP's pricing page now says the entire library, plugins included, is free for everyone, so recreating it no longer needs a membership.
Watch out for: A character like this is a real illustration and animation job, and it has to work with password managers, autofill and keyboard-only users. Make sure the form is fully usable with the avatar hidden, and keep it out of the tab order.
2. LoginCritter by Chris Goldsby: Best for bringing the Yeti idea to a native iOS app
Platform: Swift, UIKit (UIViewPropertyAnimator), MIT
LoginCritter is an open source Swift take on the same idea, credited to Senneff's shot, with about 5,700 GitHub stars. Its critter turns its head as you type, based on how wide your text is compared with the field. Typing @ in the email field makes it ecstatic, tapping the password field makes it shy, and a show password button makes it peek.
The avatar is split into parts (body, head, eyes, ears) that animate independently, which is the right way to build any reactive mascot: small pieces driven by input values, not one long timeline. Read the source before you design your own; it is a compact lesson in mapping form state to animation state.
Watch out for: It is an example project, not a maintained package. Treat it as a reference for structure and timing, and expect to redraw the character for your brand.
3. Rive login mascots: Best for a reactive character on web, iOS, Android or Flutter
Platform: Rive state machines (free CC BY files)
Rive's community marketplace has ready-made login characters you can remix, including a teddy bear file (a remix of JcToon's Animated Login Character) and an Animated Login Bunny Character with its own state machine on a Login artboard. Both are published under a CC BY license.
Rive's advantage over a hand-coded SVG is the state machine: your code sets inputs (field focused, text length, password hidden, success, failure) and the file decides which animation plays and how to blend between them. The same file runs on the web and in native and Flutter apps.
Watch out for: CC BY means you must credit the creator. You also add the Rive runtime to your login page, so check the bundle cost against how much the character really adds for returning users.
4. Codrops Text Input Effects: Best for styled focus effects on email and password fields
Platform: HTML, CSS and a little JavaScript
Codrops' "Inspiration: Text Input Effects" from January 2015 is still the best single gallery of what an input can do when you focus it: labels that slide, borders that draw themselves, shapes that fill the field. The code is on GitHub with two demo pages, and the article lives on Codrops.
For a login form, pick the calmest effect in the set. A border that draws around the field or a line that grows under it tells the user exactly where they are typing, which is the one job a focus animation has.
Our Underline Input Border below is a pure-CSS version of the same idea: an accent line grows out from the center on focus, as a scaled span, so it animates on the compositor with no reflow.
Watch out for: The Codrops license lets you use the code in personal and commercial projects but not republish or sell it as is. Some of the flashier effects hide the label until focus, which hurts people who scan a form before typing.
5. Material Design floating labels: Best for space-saving forms that stay clear while typing
Platform: Material Web components (or any CSS)
Material's text fields made the floating label a standard. The label sits inside the field like a placeholder, then moves up and shrinks when the field gains focus or has text, so you can always see what the field is for. Material offers filled and outlined variants that the docs call functionally identical; the choice is visual.
It is a good fit for a login form because the label never disappears, unlike a plain placeholder. The motion itself is a short transform on the label plus a color change on the outline.
Our Input Focus Border below shows the outlined half of the idea in pure CSS: the border draws itself around the field on focus and erases the same way on blur.
Watch out for: Floating labels break when autofill fills a field without a focus event. Style the filled state with :placeholder-shown or :autofill too, or the label will sit on top of the saved email.
6. Animate.css shakeX for a wrong password: Best for the classic no on a failed sign-in
Platform: Animate.css v4 (CSS library)
The side-to-side shake is the universal "no". Animate.css ships it as `shakeX` (and a softer `headShake`) in its attention seekers: add `animate__animated animate__shakeX` to the form when the server rejects the password, then remove the classes so it can play again next time. The library supports prefers-reduced-motion out of the box.
Shake the whole card or the password field once, under a second, and pair it with a clear text error. The shake grabs attention; the words explain.
Our Shake X below is the same motion as a single pure-CSS keyframe, with only translateX moving and shrinking swings that settle in under a second, if you don't want a whole library for one effect.
Watch out for: Animate.css uses the Hippocratic License, not MIT, so check it fits your project. And never shake without an error message: a screen reader user gets nothing from the motion.
7. zxcvbn strength meters: Best for sign-up forms that coach a stronger password
Platform: JavaScript library by Dropbox, MIT
zxcvbn is Dropbox's password strength estimator, with about 16,000 GitHub stars. Instead of counting character types, it pattern-matches common words, names, dates and keyboard runs, and returns a score from 0 (too guessable) to 4 (very unguessable). That score is what most good strength meters animate.
Map the five scores to a bar that fills and changes color, and let the label climb from Weak to Strong as the user types. The motion rewards a better password in real time, which is far more persuasive than a rules list.
Our Password Typing Animation below is a pure-CSS illustration of the pattern: characters flash and turn into dots while a strength meter fills and its label climbs.
Watch out for: The library is large for a login page, so load it only on sign-up or change-password screens, and only when the field gets focus. Don't block weak passwords with motion alone; say why in text.
8. GOV.UK error summary: Best for errors that must work for everyone, with no motion
Platform: GOV.UK Design System (HTML, CSS, JS)
The counterpoint on this list. The UK government's design system doesn't animate errors at all. When validation fails, an error summary appears at the top of the page, keyboard focus moves to it automatically, and every line links straight to the field it describes, with wording that matches the message beside the input.
It is here because it shows what any login animation must not replace: focus management and linked, specific messages. If you add a shake or a red glow, add it on top of this behavior, never instead of it.
Watch out for: Copying the summary without the focus move defeats the point. Use the design system's JavaScript, or move focus yourself after a failed submit.
9. Our Glassmorphism Login Form: Best for a complete, styled sign-in card to start from
Platform: Motions directory, free, pure CSS Ours
A frosted sign-in card with glass inputs and a solid button, floating between two slow color orbs. Fields glow when focused through :focus-within, and the button gets a shine sweep on hover. Everything else stays still, so the form never competes with the user's typing.
It is a full layout rather than a single effect, which makes it a quick starting point for a landing page or app login. Swap the accent color and size with the two custom properties, and see the Glass Effects directory for matching cards and modals.
Watch out for: Frosted glass costs contrast. Check your input text and placeholder against the busiest part of the background, and keep the orbs slow so the blur doesn't repaint constantly on low-end phones.
10. Our Show Password Toggle: Best for a password reveal that feels deliberate
Platform: Motions directory, free, pure CSS Ours
Showing the password is one of the most useful things a login form can offer, especially on phones. Here the closed eye opens with a springy blink and a scan line wipes the dots into readable text. In your form, the switch flips the input's type between password and text.
If you prefer an icon button to a switch, our Show Password Eye Checkbox does the same reveal as a single eye whose lid flips up.
Watch out for: Give the control a real label (Show password) and an aria-pressed or checked state, so screen reader users know whether the password is visible. The animation is decoration; the state is the feature.
11. Our Invalid Input Shake Border: Best for inline email validation with no JavaScript
Platform: Motions directory, free, pure CSS Ours
An email field that shakes once and glows red when the address is invalid, then draws a green check once it is fixed. It uses :invalid together with :not(:placeholder-shown), so it waits until the user has actually typed something before judging it.
That wait is the important part. Forms that turn red the moment you focus them feel hostile. This one only reacts to real input, and it celebrates the fix as clearly as it flags the mistake.
Watch out for: Browser email validation is loose (it accepts addresses your server may reject), so keep server-side checks and a text message. Use the shake for the format check, not for a wrong password, which only the server knows.
12. Our OTP Code Input: Best for two-factor and email code screens
Platform: Motions directory, free, pure CSS Ours
More logins now end with a six-digit code. This animation shows the ideal flow: six boxes fill one digit at a time while the focus ring and caret step from box to box, then a small wave runs across them to mark the code complete.
Use the motion as a spec for your real input. Pair it with our Resend Code Countdown Button, which locks for a few seconds with a live countdown so impatient users don't request five codes.
Watch out for: In production, use one input with autocomplete="one-time-code" (styled to look like boxes) rather than six separate inputs, so phones can autofill the code from a text message and pasting works.
How to choose a login animation
Match it to the moment
Pick one animation per moment and skip the rest: a focus effect (Codrops or Material style), a reveal for the password, a shake plus text for a failure, and a short success before redirect. A character like the Yeti or a Rive mascot replaces the focus and password moments with one reactive figure, so don't stack it on top of everything else.
Match it to who logs in
Returning users log in many times a week and want speed, so keep motion under 300ms and never delay the button. A playful mascot suits sign-up and consumer apps with a light voice. Banks, health and government services should start from the GOV.UK pattern: clear errors, focus moved, motion minimal.
Match it to your stack
Pure CSS covers focus, validation, reveals and shakes, and every demo above is copy-paste HTML and CSS. Add Rive or GSAP only if you want a character. Native iOS teams can start from LoginCritter's structure. For more small form effects, browse the Border Animations directory and our micro-interaction guide.
Improve your login form today
Sign out of your own product and log back in with a wrong password first. Note what moves, what doesn't, and where you weren't sure what happened. Then add the one missing piece from this list, usually a clear focus state or an error that shakes and explains.
If you want a login animation made for your brand, describe it (or paste your form's HTML) in the creator and get production-ready CSS with reduced-motion behavior included.
Animate my login form (HTML below) with CSS only. On focus, draw the input border around the field in 250ms with ease-out and tint the label. On a failed sign-in (class .is-error on the form), shake the card once: translateX in shrinking swings, 450ms total. The show password button blinks an eye icon open in 200ms with a slight spring. Under prefers-reduced-motion, replace the shake with a red outline and remove the blink. Keep every state readable without animation.
Common questions
Should a login page have animations?
Small ones, yes: a clear focus state, a reveal for the password, and an error that draws the eye help people sign in faster. Avoid intros, loops and anything that delays the form for returning users. Every animation should answer something the user just did.
How do you make a login form shake on a wrong password?
Define a @keyframes animation that moves translateX left and right in shrinking steps over about 400 to 600ms, add a class that applies it when the server rejects the login, and remove the class on animationend so it can replay. Always show a text error too. Our Shake X keyframe is ready to copy.
How was the Yeti login form made?
Darin Senneff drew the yeti as SVG and animated it with GSAP: the eyes and head follow the length of the text in the email field, and the arms move up to cover the eyes when the password field is focused. Ports exist for Webflow, Rive-style mascots and native iOS (LoginCritter).
Are floating labels good for login forms?
They are fine if the label stays visible and readable once it floats, and if you handle autofill so the label doesn't overlap a saved email. A label above the field with no animation is still the most robust option.
How do I make login animations accessible?
Respect prefers-reduced-motion, never rely on motion alone to signal an error, move focus to the error message after a failed submit, give the show password control a proper label and state, and keep decorative mascots out of the tab order.