25 of 60 · finish a word to lift it
Pin art
11 of 12 · two lines of six
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldPinscreen(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-pinscreenAbout this component
A word pushed up through a pin art toy: each letter rises out of the steel pins from behind in a quick wave, the raised heads catching the light, and the pins swell under your pointer as if a hand pressed from behind.
- Dependencies
- None
- Difficulty
- Advanced
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Mouse tracking
- Delay stagger
Techniques4
- @property
- Mouse tracking
- Transition delay stagger
- Radial gradient
Accessibility
Keyboard and screen readers
One native input named "Word on the pin art", transparent over the frame; the pins are 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 allThe planchette is moving…
Taken by other commands
- New note⌘N
- Find⌘F
- Sidebar⌘\