Tethered Runaway Login Button with Elastic String Physics
Interactive HTML5, SVG & Vanilla JS authentication card with spring-tethered cursor evasion and progressive validation
A playful authentication micro-interaction named Tether. The login button is physically attached to an anchor origin by a dynamic elastic cord. When the cursor approaches with incomplete credentials, the button flees while tilting and stretching against its tether line. As validation requirements are progressively met, evasion damping increases until the button snaps back into the center with an illuminated active state.
Live preview
Source code — unlock for $4.99
Get the full, commented source with copy, .html and PDF download.
Digital product, delivered instantly. No refunds once the code is unlocked or downloaded. See our Snippet Terms.
Support the Code Library
These previews are free to browse. If a snippet saved you time, a coffee helps keep new ones coming.
Built by Cardly NFC Scanner
Turn your phone into a digital business card and read, write or erase NFC tags yourself — plus a full toolkit of free browser tools.
Feedback
Spotted a bug or have a request for this snippet? Let us know.