The planchette is moving…
Placard
25 of 60 · finish a word to lift it
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldPlacard(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-placardAbout this component
A slogan in marker on a cardboard placard: the sign bobs with each word, and when you run out of room the last letters squeeze smaller and bend down the edge, the way hand lettering does.
- Dependencies
- None
- Difficulty
- Advanced
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Spring
- Keyframe
Techniques3
- Keyframes
- clip-path
- State machine
Accessibility
Keyboard and screen readers
One native input named "Slogan for the placard"; the sign is aria-hidden and the room left, or that it is full, 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 allTaken by other commands
- New note⌘N
- Find⌘F
- Sidebar⌘\
3 of 4 stops · click a board to take it down