LiveType a few words and watch the line spring and the ring update
The prompt
Create an engraving form for a fictional jeweller, Aubrin Goldsmiths, on a warm ivory page (#f3ece2) with ink text (#1d1a17) and a gold accent (#b38a2e). Left: a gold wedding band drawn in inline SVG at an angle, with an outer face, a thin bright rim and the inner back wall visible through the hole, all in gold gradients from #7a5a1e to #f6e2a4, plus a soft shadow. The engraving sits on an SVG textPath that follows the curve of the inner wall and updates as you type. Right: a gold uppercase label, a serif headline "Words for the inside of the band" and a text input with a floating label, maxlength 20, 24px serif text (20px on phones). Its underline is an SVG quadratic curve that is pulled down at the caret position each time you type, pushed up when you delete, and springs back with a damped oscillation (stiffness 0.07, damping 0.11). At the limit the line and a circular character counter turn red (#b5432f). Below, three lettering choices as a real radio group styled as a segmented control (Script, Roman, Block) that restyle the engraving, three suggestion chips (hidden on phones) and "Engraving £35" with an "Add to my ring" button. Keep the line straight for reduced motion.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
Copy the prompt with the button above.
Paste it into your tool, such as v0, Lovable, Bolt or Claude.
Make it yours by swapping the ring for your own product and its engraving limit.
About this input animation css
A text field rarely gets any love beyond a coloured border on focus. This input animation css gives the underline a little physics. Every letter you type tugs the line down right under the caret, every deletion pushes it up, and it wobbles back to straight like a plucked string. It is a small thing, but it makes the field feel alive and it tells you exactly where you are typing.
The field has a job too. Whatever you write appears on the inside of a gold ring next to it, bent along the curve of the band, so you can judge length and spacing before you order. A counter ring fills as you approach twenty characters and turns red at the limit, and the three lettering styles are a real radio group, so keyboards and screen readers handle them properly.
Why the prompt works
It gives the spring two numbers, stiffness and damping, which set the whole feel.
It ties the pull to the caret, not the middle of the line.
It uses an SVG textPath for the live preview, so the words truly curve.
It keeps the form real, with a floating label, a limit and radio buttons.
Where to use it
Personalised gifts, engraving and monogram forms, name fields on sign up pages and anywhere a single input deserves a little character.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
We use cookies to measure how the site is used and, if you allow it, to show advertising. Prompts you copy and previews you try are never collected. See our privacy policy.
