Shadcn.io is not affiliated with official shadcn/ui
Password Text
Text rendered as masking dots that morph one-by-one into the real characters with a staggered cross-fade and subtle scale, built with React, Next.js, and motion/react for privacy-aware UI.
Password Text preview
A password field's reveal interaction, lifted out as a primitive. By default the string renders as a row of dots ("••••••••"); on hover, click, or an auto-cycling timer, the dots morph one-by-one into the actual characters via a cross-fade plus a tiny scale tween — same physical position, same width, just a different glyph fading through. Spaces stay rigid spaces, never dots, so the cadence of the original text is preserved. Every reveal is GPU-driven via motion/react's AnimatePresence with a popLayout mode, so there's no jank even on long strings. Drop it into signup flows, secret-reveal hero copy, account dashboards, or marketing sections about privacy and encryption.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the password-text text effect into my projectRelated Components
Decrypted Text
Letters resolve from random ciphertext to the target string
Scrambled Text
Glyph scramble that resolves on hover or in view
Mask Reveal Text
Sliding mask uncovers each line of text
Blur Text
Text animation from blur to focus
Splitting Text
Character, word, or line splitting with timing
Text Generate Effect
Progressive word-by-word generation
FAQ
Was this page helpful?
Sign in to leave feedback.
Paper Fold Text
Letters that unfold into place from a folded paper crease, with the top half rotating down to reveal each character for an origami-style reveal animation for React applications.
Pendulum Text
Letters dangle from invisible strings and swing as underdamped pendulums driven by Motion springs for React applications.