4 of 10 letters, fished out of the soup
Signpost
3 of 4 stops · click a board to take it down
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldSignpost(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-signpostAbout this component
Stops on a trip as a fingerpost: each place you add is cut as an arrow board that swings in and is nailed to the post, pointing the other way from the last; click a board to take it down and it drops away.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Click
- Keyframe
Techniques3
- clip-path
- Keyframes
- State machine
Accessibility
Keyboard and screen readers
The boards are a list of buttons named "Remove <place>"; the input is named "Add a stop" and a polite status line reports each change.
Reduced motion
Everything changes at once, without the motion.
Use it in anything you build, commercial and client work included. Licence
More inputs
See all13 words · about 5 seconds read aloud
$12.50 · Enter to ring it up
11 of 16 letters, home port Falmouth