Melody
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldMelody(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-melodyAbout this component
Type note names and each one lands on its line or space of the stave with a little bounce; every four notes a bar line draws in to close the measure, with a double bar at the end.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Keyframe
- Draw
Techniques3
- SVG
- Keyframes
- stroke-dashoffset
Accessibility
Keyboard and screen readers
The native input is named "Notes, C to B"; the stave is aria-hidden.
Reduced motion
Everything changes at once, without the motion.
Use it in anything you build, commercial and client work included. Licence
More inputs
See all132 characters left
6 of 12 letters, cut in one piece
Alarm set for 07:30 · arrows nudge it