⏱️ Metro-Gnome Web Component

The <metro-gnome> component is a fully configurable metronome with both digital and analog display modes.

Features

• ⏱️ Tempo range: 1-10000 BPM (no upper limit!)
• 🎵 Arbitrary time signatures (beats: 1-32, note values: 1, 2, 4, 8, 16, 32)
• 🎼 Polyrhythm mode with dual independent meters
• 📱 Digital and analog display modes
• 🎯 Accurate timing engine
• 🔊 Custom events for integration
• 🎨 Themeable via CSS variables

Usage

Basic Example

<metro-gnome></metro-gnome>

With Custom Configuration

<metro-gnome tempo="140" beats="7" note="8" mode="analog"></metro-gnome>

Attributes

tempo

• Type: Integer
• Range: 1-10000+
• Default: 120
• Description: Beats per minute

beats

• Type: Integer
• Range: 1-32
• Default: 4
• Description: Top number of time signature

note

• Type: Integer
• Range: 1, 2, 4, 8, 16, 32
• Default: 4
• Description: Bottom number of time signature (note value)

mode

• Type: String
• Values: "digital" | "analog"
• Default: "digital"
• Description: Display mode

poly-enabled

• Type: Boolean
• Values: true | false
• Default: false
• Description: Enable polyrhythm mode with dual independent meters

poly-beats

• Type: Integer
• Range: 1-32
• Default: 3
• Description: Number of beats in the polyrhythm meter (inner circle)

Events

start

Fired when playback begins.

element.addEventListener('start', (e) => {
  console.log('Started:', e.detail);
  // { tempo: 120, beats: 4, note: 4 }
});

stop

Fired when playback stops.

element.addEventListener('stop', (e) => {
  console.log('Stopped:', e.detail);
});

tick

Fired on each beat.

element.addEventListener('tick', (e) => {
  console.log('Tick:', e.detail);
  // { beat: 1, totalBeats: 4, tempo: 120, note: 4, polyEnabled: false }
  // When polyrhythm is enabled:
  // { beat: 1, totalBeats: 4, tempo: 120, note: 4, polyEnabled: true, polyBeat: 1, polyBeats: 3 }
});

Examples

Default Metronome (4/4, 120 BPM)

Fast Waltz (3/4, 180 BPM)

Complex Time (7/8, 140 BPM, Analog)

Extreme Tempo Test (5000 BPM)

Polyrhythm: 4:3 (Four Against Three)

Classic polyrhythm with 4 beats in the outer circle and 3 beats in the inner circle.

Polyrhythm: 5:3 (Five Against Three)

More complex polyrhythm pattern.

Polyrhythm: 7:4 (Seven Against Four)

Advanced polyrhythm for studying complex patterns.

Polyrhythm Mode

Polyrhythm mode allows you to practice playing two different rhythmic patterns simultaneously. This is a fundamental skill in many musical traditions, including West African drumming, jazz, and contemporary classical music.

How It Works

When polyrhythm mode is enabled:

• The outer circle (orange) represents the primary meter
• The inner circle (cyan) represents the cross-meter
• Both meters share the same bar duration, but divide it differently
• Each meter has its own hand and beat counter

Common Polyrhythms

• 3:2 - Simple polyrhythm, great for beginners
• 4:3 - Classic "four against three", very common in music
• 5:4 - Found in progressive rock and modern jazz
• 7:4 - Complex pattern used in experimental music

Practice Tips

1. Start slow and focus on feeling both patterns
2. Try counting one pattern while tapping the other
3. Use analog mode to visualize how the patterns align
4. Gradually increase tempo as you get comfortable

CSS Theming

Customize the appearance using CSS variables:

:root {
  --mg-bg: #000;
  --mg-color: #fff;
  --mg-accent: #f80;
  --mg-size: 200px;
  --mg-hand-color: #f80;
  --mg-font: system-ui, sans-serif;
}