Motto

No dependencies
Code format

Install with shadcn

Needs a free account token. Get a token

npx shadcn@latest add @movin/input-motto

About this component

A motto on an engraved ribbon: the band is cut to fit the words and unfurls wider on a spring as you type, its swallowtail ends folding back behind it and swaying as they settle, in engraving linework and hatching.

Dependencies
None
Difficulty
Advanced
Reduced motion
Respected
Theme
Light and dark
Follows page color-scheme

Triggers3

  • State change
  • Spring
  • Draw

Techniques3

  • SVG
  • requestAnimationFrame
  • Spring

Accessibility

Keyboard and screen readers

One native input named "Motto"; the ribbon is aria-hidden and the letter count is plain text.

Reduced motion

Everything changes at once, without the motion.

Use it in anything you build, commercial and client work included. Licence

More inputs

See all
Keypad phoneGet code

6 of 12 letters, cut in one piece

Name necklaceGet code
Nixie alarmGet code
Date blocksGet code