shadcn.io is not affiliated with official shadcn/ui
Metronome Music Block for Solid
A metronome with a sliding BPM figure and its tempo word, one to six beat buttons that cycle accent, normal and silent, a ring that steps across the beats with a visible Stop, a tempo slider, a number field, Tap tempo and a time signature select.
Installation
Overview
Give practice tools a tempo to work against, with this metronome for Solid with Ark UI. It shows Pulsebar, a practice tool, in a hairline frame with a plus mark on each corner: the tempo in large type with its Italian word (Largo to Presto) and the time signature, a row of beat buttons, and a Shine Button that starts and stops the ring. The ring is one CSS animation that steps from beat to beat at the tempo; it ends by itself after sixteen bars. Each beat button cycles accent, normal and silent when pressed, and the tempo comes from a Slider from 40 to 220, a Number Input with plus and minus, or Tap tempo, a Button that averages your last four taps. A Select switches between 2/4, 3/4, 4/4, 5/4 and 6/8, and the figure rolls its digits with a Sliding Number. Under reduced motion nothing loops: the main button becomes Next beat and moves the ring one beat. It's built from Slider, Number Input, Select, Sliding Number, Button and Guides, with a CSS entrance only. For practice, music-lesson and rehearsal apps.
FAQ
How do I change the tempo range, signatures or accents?
LOW and HIGH set the ends of the slider, the number field and Tap tempo, SIGNATURES lists the choices (the top number gives the beats in a bar, up to six), and WORDS holds the tempo words with the first BPM of each. startingTones decides which beats start as accents: beat one, and beat four in 6/8. Pressing a beat cycles it through nextTone, and the state is an array of six tones kept across signature changes only until you pick another signature.
Is there a clock, and what stops the ring?
No timer runs in the page. The ring is a single CSS animation whose length is the bar (the beat length times the beats) and whose timing function steps once per beat, so it lands on each beat in turn and never between them. Changing the tempo while it runs changes the animation's length, and it ends after sixteen bars or when you press Stop, whichever comes first; the status line says which. Press Start to run it again.
Does it make a sound, and what stays local?
No. The block says so on screen: no audio plays in this demo, and it never creates an audio context. Everything lives in the page and resets on a reload. To make a real metronome, schedule clicks from an audio clock in your app and use the same tempo, signature and accent state to decide which click is loud, soft or skipped.
How does Tap tempo work?
Each press records the time it happened; the tempo is 60000 divided by the average gap between the last four presses, kept between 40 and 220. A gap of more than two seconds starts a new count, and the first press only says to tap again. It uses the page's own high-resolution clock inside the click handler, so nothing is read while it renders.
How do I use it from the keyboard, and with reduced motion?
Every control is a button, a slider or a field: Tab to a beat and press Enter or Space to change it, use the arrow keys on the slider and the plus and minus buttons for one BPM at a time. With reduced motion on, the ring never loops and the main button reads Next beat.