Alarm set for 07:30 · arrows nudge it
Name necklace
6 of 12 letters, cut in one piece
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldNameplate(el) on the mounted element instead.
HTML
CSS
JavaScript
Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Install with shadcn
Needs a free account token. Get a token
npx shadcn@latest add @movin/input-nameplateAbout this component
A name cut as a script nameplate necklace: the polished letters are one piece on a joining bar, the chain hooks onto the first and last letter, and the pendant swings and settles as it grows.
- Dependencies
- None
- Difficulty
- Advanced
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Spring
- Gradient
Techniques3
- SVG
- Gradient
- Keyframes
Accessibility
Keyboard and screen readers
One native input named "Name for the necklace"; the pendant is aria-hidden and the count, or the reason for a refusal, is announced.
Reduced motion
Everything changes at once, without the motion.
Use it in anything you build, commercial and client work included. Licence
More inputs
See all11 of 12 · two lines of six
25 of 60 · finish a word to lift it