Crossword
3 AcrossCircle round a planet (5)
2 of 5 letters
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldCrossword(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-crosswordAbout this component
One across in a little grid: letters fill the free squares while the caret hops over the ones the down answers already gave you; the right answer ripples across, a wrong one shakes and is struck through.
- Dependencies
- None
- Difficulty
- Advanced
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Focus
- Keyframe
Techniques3
- Keyframes
- State machine
- CSS variables
Accessibility
Keyboard and screen readers
One native input whose aria-label reads the clue and its length; the grid is aria-hidden and the letter count is announced in 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 allOn every tab · Enter takes one
Server address
Waiting for a full address