Talking board
The planchette is moving…
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldPlanchette(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-planchetteAbout this component
A question spelled out on a talking board: the planchette glides to each letter you type, rests in the middle for a space, and when you end with a question mark it drifts slowly to YES or NO.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Spring
- Ambient
Techniques3
- SVG
- CSS transition
- State machine
Accessibility
Keyboard and screen readers
One native input named "Ask the board a question"; the board is aria-hidden and the answer is announced once the planchette has settled on it.
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
4 of 10 letters, fished out of the soup