Tear-off flyer
On every tab · Enter takes one
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldFlyer(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-flyerAbout this component
A phone number on a flyer taped to a wall: it is written down every tear-off tab along the fringe as you type, and Enter tears a tab off and lets it fall, the way people take one in passing.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Click
- Delay stagger
Techniques4
- Keyframes
- clip-path
- Transition delay stagger
- CSS variables
Accessibility
Keyboard and screen readers
One native input named "Phone number" (type tel); the tabs are aria-hidden and the count of tabs taken 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 allServer address
Waiting for a full address