Server address
Waiting for a full address
Inscription
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldInscription(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-inscriptionAbout this component
Engraving on a ring: the words are cut into the outside of the band and follow its curve, narrowing toward the edges, and the band turns as you type so each letter is cut at the front with a spark.
- Dependencies
- None
- Difficulty
- Advanced
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- 3D
- Keyframe
Techniques3
- @property
- CSS variables
- SVG
Accessibility
Keyboard and screen readers
One native input named "Ring engraving", transparent over the ring; focus outlines the ring and shows a caret at the front. The ring and count are aria-hidden.
Reduced motion
Everything changes at once, without the motion.
Use it in anything you build, commercial and client work included. Licence