diff --git a/.gitignore b/.gitignore
index 9b964d3..a7944aa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,7 +20,6 @@ pnpm-debug.log*
 lerna-debug.log*
 
 # Editor directories and files
-.vscode/*
 .idea
 *.suo
 *.ntvs*
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..78be5f0
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,6 @@
+{
+    "recommendations": [
+        "svelte.svelte-vscode",
+        "bradlc.vscode-tailwindcss"
+    ]
+}
\ No newline at end of file
diff --git a/src/lib/device/metronome/MetronomeBeats.svelte b/src/lib/device/metronome/MetronomeBeats.svelte
index 97b3a21..442c27e 100644
--- a/src/lib/device/metronome/MetronomeBeats.svelte
+++ b/src/lib/device/metronome/MetronomeBeats.svelte
@@ -1,26 +1,21 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { getMetronomeContext } from './context';
 
 	const metronome = getMetronomeContext();
 
-	let beatPerBar = 4,
-		currentBeat = 1;
-	onMount(() => {
-		beatPerBar = metronome.state.beatPerBar;
-		currentBeat = metronome.state.currentBeat;
-		metronome.onBeat((state) => {
-			currentBeat = state.currentBeat;
-		});
-		metronome.onOptionChange((state) => {
-			beatPerBar = state.beatPerBar;
-		});
+	let beatPerBar = metronome.timer.tempoState.beatPerBar,
+		currentBeat = 0;
+	metronome.onBeat((state) => {
+		currentBeat = state.currentBeat;
+	});
+	metronome.timer.onTempoChanged((state) => {
+		beatPerBar = state.beatPerBar;
 	});
 </script>
 
 <div
 	{...$$restProps}
-	class="{$$props.class} relative flex w-screen flex-row items-center justify-center gap-[40px]"
+	class="{$$props.class} relative flex w-screen flex-row flex-wrap items-center justify-center gap-[40px]"
 >
 	{#each new Array(beatPerBar) as _, i}
 		{#if i === 0}
diff --git a/src/lib/device/metronome/MetronomeOptions.svelte b/src/lib/device/metronome/MetronomeOptions.svelte
index 6130b77..04ffb53 100644
--- a/src/lib/device/metronome/MetronomeOptions.svelte
+++ b/src/lib/device/metronome/MetronomeOptions.svelte
@@ -3,14 +3,19 @@
 	import { getMetronomeContext } from './context';
 
 	const metronome = getMetronomeContext();
-	export let bpm = metronome.bpm;
-	export let beatPerBar = metronome.beatPerBar;
+	export let bpm = metronome.timer.bpm;
+	export let beatPerBar = metronome.timer.beatPerBar;
+
+	metronome.timer.onTempoChanged((state) => {
+		bpm = state.bpm;
+		beatPerBar = state.beatPerBar;
+	});
 
 	let lastTapTimestamp = -1;
 	let tapIntervalStore: number[] = [];
 
-	$: metronome.bpm = bpm;
-	$: metronome.beatPerBar = beatPerBar;
+	$: metronome.timer.bpm = bpm;
+	$: metronome.timer.beatPerBar = beatPerBar;
 </script>
 
 <div class="flex h-full flex-col items-start justify-between">
diff --git a/src/lib/device/metronome/MetronomePlayButton.svelte b/src/lib/device/metronome/MetronomePlayButton.svelte
index dc7af10..6003405 100644
--- a/src/lib/device/metronome/MetronomePlayButton.svelte
+++ b/src/lib/device/metronome/MetronomePlayButton.svelte
@@ -1,17 +1,30 @@
 <script lang="ts">
+	import { getMetronomeContext } from '$/lib/device/metronome/context';
 	import { Play, Stop } from '@steeze-ui/heroicons';
 	import { Icon } from '@steeze-ui/svelte-icon';
-	import { getMetronomeContext } from './context';
+	import { onDestroy } from 'svelte';
+
 	const metronome = getMetronomeContext();
-	$: isRunning = metronome.isRunning;
+	metronome.schedule();
+
+	let isRunning = false;
+	const cancelStart = metronome.timer.onStart(() => {
+		isRunning = true;
+	});
+	const cancelStop = metronome.timer.onStop(() => {
+		isRunning = false;
+	});
+	onDestroy(() => {
+		cancelStart();
+		cancelStop();
+	});
 </script>
 
 <button
 	{...$$restProps}
 	class="{$$props.class} flex aspect-square items-center justify-center rounded-full bg-indigo-900 p-0 focus:outline-none"
 	on:click={() => {
-		metronome.toggle();
-		isRunning = metronome.isRunning;
+		metronome.timer.toggle();
 	}}
 >
 	{#if isRunning}
diff --git a/src/lib/device/metronome/MetronomeProvider.svelte b/src/lib/device/metronome/MetronomeProvider.svelte
index 2cf1c12..39a54d8 100644
--- a/src/lib/device/metronome/MetronomeProvider.svelte
+++ b/src/lib/device/metronome/MetronomeProvider.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
+	import { TempoTimer } from '$/lib/timer/tick';
 	import { onDestroy } from 'svelte';
 	import { setMetronomeContext } from './context';
 
-	export let beatPerBar = 4;
-	export let signatureUnit = 4;
-	export let bpm = 120;
+	export let timer: TempoTimer | undefined;
 
-	const metronome = setMetronomeContext({ beatPerBar, bpm, signatureUnit });
+	const metronome = setMetronomeContext(timer);
 
 	onDestroy(() => {
 		metronome.destroy();
diff --git a/src/lib/device/metronome/context.ts b/src/lib/device/metronome/context.ts
index 2f2e139..96301e9 100644
--- a/src/lib/device/metronome/context.ts
+++ b/src/lib/device/metronome/context.ts
@@ -1,20 +1,14 @@
+import { TempoTimer } from '$/lib/timer/tick';
 import { getContext, setContext } from 'svelte';
-import Metronome, {
-	type MetronomeOption,
-	type OnBarCallback,
-	type OnBeatCallback
-} from './metronome';
+import Metronome from './metronome';
 
 const CONTEXT_KEY = 'metronome';
 
-export const setMetronomeContext = (option: MetronomeOption) => {
-	const context = setContext(CONTEXT_KEY, new Metronome(option));
+export const setMetronomeContext = (timer?: TempoTimer) => {
+	const context = setContext(CONTEXT_KEY, new Metronome(timer ?? new TempoTimer()));
 	return context;
 };
 
 export const getMetronomeContext: () => Metronome = () => {
 	return getContext(CONTEXT_KEY);
 };
-
-export const onBeat = (cb: OnBeatCallback) => getMetronomeContext().onBeat(cb);
-export const onBar = (cb: OnBarCallback) => getMetronomeContext().onBar(cb);
diff --git a/src/lib/device/metronome/metronome.ts b/src/lib/device/metronome/metronome.ts
index 9337664..f570c21 100644
--- a/src/lib/device/metronome/metronome.ts
+++ b/src/lib/device/metronome/metronome.ts
@@ -1,4 +1,4 @@
-import { TempoTimer, type AudioTickState, type TickState } from '../../timer/tick';
+import { TempoTimer, type AudioTickState, type TempoState, type TickState } from '../../timer/tick';
 
 export interface MetronomeOption {
 	beatPerBar?: number;
@@ -6,105 +6,92 @@ export interface MetronomeOption {
 	bpm?: number;
 }
 export interface MetronomeState {
-	beatPerBar: number;
-	bpm: number;
+	tempo: TempoState;
 	currentBeat: number;
-	barPassed: number;
+	currentBar: number;
 }
 export type OnBeatCallback = (state: MetronomeState) => unknown;
 export type OnBarCallback = (state: MetronomeState) => unknown;
-export type OnOptionChangeCallback = (state: MetronomeState) => unknown;
 
-// beat per minute == beat/minute == beat/(second * 60) === beat/(ms * 60 * 1000)
-const MILLISECOND_PER_MINUTE = 60000;
 class Metronome {
-	constructor(option: MetronomeOption = {}) {
-		const { beatPerBar = 4, bpm = 120, signatureUnit = 4 } = option;
-		this.beatPerBar = beatPerBar;
-		this.bpm = bpm;
-		this.timer.signatureUnit = signatureUnit;
+	#timer: TempoTimer;
+	constructor(timer: TempoTimer) {
+		this.#timer = timer;
+		this.#timer.onStart(() => {});
+		this.#timer.onStop(() => {});
 	}
 
-	get beatPerBar() {
-		return this.timer.beatPerBar;
-	}
-	set beatPerBar(value: number) {
-		this.timer.beatPerBar = value;
-		this.#onOptionChangeCallbacks.forEach((cb) => cb(this.state));
-		this.restart();
+	get timer() {
+		return this.#timer;
 	}
 
-	#bpm = 120;
-	get bpm() {
-		return this.#bpm;
-	}
-	set bpm(value: number) {
-		this.timer.bpm = value;
-		this.#onOptionChangeCallbacks.forEach((cb) => cb(this.state));
+	#isScheduled: boolean = false;
+	get isScheduled() {
+		return this.#isScheduled;
 	}
 
-	timer = new TempoTimer();
-
-	get state() {
-		return {
-			beatPerBar: this.beatPerBar,
-			bpm: this.bpm,
-			currentBeat: this.#currentBeat,
-			barPassed: this.#barPassed
-		};
-	}
-
-	#isRunning = false;
-	get isRunning() {
-		return this.#isRunning;
-	}
-	start(): void {
-		if (!this.#isRunning) {
-			this.#isRunning = true;
-			this.timer.start();
+	#scheduleId: number = -1;
+	schedule() {
+		if (!this.#isScheduled) {
+			this.#isScheduled = true;
+			this.#timer.scheduleLoopOnTempo({
+				time: { start: 0, interval: this.#notesPerBeat },
+				animation: this.#onTick.bind(this),
+				audio: this.#scheduleAudio.bind(this)
+			});
+			return this.removeSchedule.bind(this);
 		}
 	}
-
-	#stopScheduling: (() => void) | null = null;
-	schedule() {
-		this.#stopScheduling = this.timer.loop(
-			{ start: 0, duration: this.#notesPerBeat },
-			this.#onTick.bind(this),
-			this.#scheduleAudio.bind(this)
-		);
+	removeSchedule() {
+		if (this.#isScheduled) {
+			this.#isScheduled = false;
+			this.#timer.cancelSchedule(this.#scheduleId);
+		}
 	}
 
-	#currentBeat = 0;
-	#barPassed = 0;
 	#onTick({ time, tickPassed }: TickState) {
-		this.#currentBeat += 1;
-		this.#onBeatCallbacks.forEach((cb) => cb(this.state));
-		if (this.#currentBeat % this.timer.beatPerBar === 1) {
-			this.#onBarCallbacks.forEach((cb) => cb(this.state));
-		}
-
-		if (this.#currentBeat >= this.timer.beatPerBar) {
-			this.#barPassed++;
-			this.#currentBeat = 0;
+		const beatPassed = tickPassed / this.#ticksPerBeat;
+		const barPassed = beatPassed / this.#timer.beatPerBar;
+		const currentBeat = (beatPassed % this.#timer.beatPerBar) + 1;
+		this.#onBeatCallbacks.forEach((cb) =>
+			cb({
+				tempo: this.#timer.tempoState,
+				currentBeat,
+				currentBar: barPassed
+			})
+		);
+		if (currentBeat === 1) {
+			this.#onBarCallbacks.forEach((cb) =>
+				cb({
+					tempo: this.#timer.tempoState,
+					currentBeat,
+					currentBar: barPassed
+				})
+			);
 		}
 	}
 
 	#masterGain: GainNode | null = null;
 	get #notesPerBeat() {
-		return this.timer.convert(1, 'beat', 'note');
+		return this.#timer.convert(1, 'beat', 'note');
+	}
+	get #ticksPerBeat() {
+		return this.#timer.convert(1, 'beat', 'tick');
 	}
-	#currentBeatInAudioTick = 0;
 	#scheduleAudio({ audioCtx, time, tickPassed }: AudioTickState) {
 		if (!this.#masterGain) {
 			this.#masterGain = audioCtx.createGain();
 			this.#masterGain.connect(audioCtx.destination);
 		}
+		const beatPassed = tickPassed / this.#ticksPerBeat;
+		const barPassed = beatPassed / this.#timer.beatPerBar;
+		const currentBeat = (beatPassed % this.#timer.beatPerBar) + 1;
 
 		const osc = audioCtx.createOscillator();
 		const gain = audioCtx.createGain();
 		osc.connect(gain);
 		gain.connect(this.#masterGain);
-		if (this.#currentBeatInAudioTick % this.timer.beatPerBar === 0) {
+		if (currentBeat === 1) {
 			osc.frequency.value = 880;
 		} else {
 			osc.frequency.value = 440;
@@ -116,33 +103,6 @@ class Metronome {
 		osc.addEventListener('ended', () => {
 			gain.disconnect();
 		});
-		this.#currentBeatInAudioTick += 1;
-	}
-
-	stop() {
-		if (this.#isRunning) {
-			this.#isRunning = false;
-			this.timer.stop();
-			if (this.#stopScheduling) this.#stopScheduling();
-			this.clearSchedule();
-			this.#currentBeat = 0;
-			this.#currentBeatInAudioTick = 0;
-			this.#barPassed = 0;
-		}
-	}
-
-	toggle(): void {
-		if (this.#isRunning) {
-			this.stop();
-		} else {
-			this.start();
-		}
-	}
-	restart() {
-		if (this.#isRunning) {
-			this.stop();
-			this.start();
-		}
 	}
 
 	#onBeatCallbacks = new Set<OnBeatCallback>();
@@ -161,24 +121,14 @@ class Metronome {
 		this.#onBarCallbacks.delete(cb);
 	}
 
-	#onOptionChangeCallbacks = new Set<OnOptionChangeCallback>();
-	onOptionChange(cb: OnOptionChangeCallback) {
-		this.#onOptionChangeCallbacks.add(cb);
-	}
-	removeOptionChange(cb: OnOptionChangeCallback) {
-		this.#onOptionChangeCallbacks.delete(cb);
-	}
-
-	clearSchedule() {
-		this.timer.clearSchedule();
+	clearDerivedSchedule() {
 		this.#onBeatCallbacks.clear();
 		this.#onBarCallbacks.clear();
 	}
 
 	destroy() {
-		this.stop();
-		this.clearSchedule();
-		this.#onOptionChangeCallbacks.clear();
+		this.removeSchedule();
+		this.clearDerivedSchedule();
 	}
 }
 
diff --git a/src/lib/guitar/finger-board/FingerBoard.svelte b/src/lib/guitar/finger-board/FingerBoard.svelte
index b365105..c76cf86 100644
--- a/src/lib/guitar/finger-board/FingerBoard.svelte
+++ b/src/lib/guitar/finger-board/FingerBoard.svelte
@@ -60,7 +60,8 @@
 		end: 12,
 		visibility: 'start'
 	};
-	let range = Object.assign(
+
+	$: range = Object.assign(
 		{
 			start: 0,
 			end: 12,
diff --git a/src/lib/practice/RandomBox/RandomBox.ts b/src/lib/practice/RandomBox/RandomBox.ts
index 0a6ce51..66a81c0 100644
--- a/src/lib/practice/RandomBox/RandomBox.ts
+++ b/src/lib/practice/RandomBox/RandomBox.ts
@@ -12,6 +12,7 @@ export class RandomBox<T> {
 		this.init();
 	}
 	init() {
+		this.#indexSelected = -1;
 		this.#remains = new Set(new Array(this.#items.length).keys());
 	}
 
@@ -25,6 +26,14 @@ export class RandomBox<T> {
 	}
 
 	#items: T[] = [];
+	get items() {
+		return this.#items;
+	}
+	set items(value: T[]) {
+		this.#items = value;
+		this.init();
+	}
+
 	#indexSelected: number = -1;
 	#remains: Set<number> = new Set<number>();
 	get remains() {
diff --git a/src/lib/practice/RandomBox/RandomBoxProvider.svelte b/src/lib/practice/RandomBox/RandomBoxProvider.svelte
index 44ec756..e0cb5d2 100644
--- a/src/lib/practice/RandomBox/RandomBoxProvider.svelte
+++ b/src/lib/practice/RandomBox/RandomBoxProvider.svelte
@@ -6,6 +6,9 @@
 	export let items: T[] = [];
 
 	const randomBox = setRandomBoxContext(new RandomBox<T>(items));
+	$: randomBox.items = items;
+
+	console.log(randomBox);
 
 	onDestroy(() => {
 		randomBox.destroy();
diff --git a/src/lib/practice/types.ts b/src/lib/practice/types.ts
index c1524d6..4e73d08 100644
--- a/src/lib/practice/types.ts
+++ b/src/lib/practice/types.ts
@@ -9,6 +9,7 @@ export interface Tempo {
 export interface ScoreTimestamp {
 	start: number;
 	duration?: number;
+	interval?: number;
 }
 
 export interface PracticeNote {
diff --git a/src/lib/timer/constant.ts b/src/lib/timer/constant.ts
new file mode 100644
index 0000000..3b24c1c
--- /dev/null
+++ b/src/lib/timer/constant.ts
@@ -0,0 +1 @@
+export const MAX_TICK_SIZE = 4294967295;
diff --git a/src/lib/timer/event.ts b/src/lib/timer/event.ts
new file mode 100644
index 0000000..81150fa
--- /dev/null
+++ b/src/lib/timer/event.ts
@@ -0,0 +1,66 @@
+import type { ScoreTimestamp } from '../practice/types';
+import { MAX_TICK_SIZE } from './constant';
+import { type AudioTickCallback, type TickCallback } from './tick';
+
+export type TickTimestamp = ScoreTimestamp;
+export interface TickEventCallbacks {
+	audio: AudioTickCallback;
+	animation: TickCallback;
+	cleanup: TickCallback;
+}
+
+export interface TickEventOption {
+	time: TickTimestamp;
+	callbacks?: Partial<TickEventCallbacks>;
+}
+
+export class TickEvent {
+	static #currentId = 0;
+	static get #nextId() {
+		return this.#currentId++;
+	}
+
+	#id: number;
+	get id() {
+		return this.#id;
+	}
+
+	#time: TickTimestamp;
+
+	get start() {
+		return this.#time.start;
+	}
+
+	get interval() {
+		return this.#time.interval;
+	}
+
+	get duration() {
+		return this.#time.duration;
+	}
+
+	#callbacks?: Partial<TickEventCallbacks>;
+	get callbacks() {
+		return this.#callbacks;
+	}
+	get animation() {
+		return this.#callbacks?.animation;
+	}
+	get cleanup() {
+		return this.#callbacks?.cleanup;
+	}
+	get audio() {
+		return this.#callbacks?.audio;
+	}
+	constructor({ time, callbacks }: TickEventOption) {
+		if (time.start < 0 || MAX_TICK_SIZE <= time.start + (time.duration ?? 0)) {
+			throw RangeError('tick out of range');
+		}
+		if (!callbacks?.audio && !callbacks?.animation) {
+			throw TypeError('either audio or animation callback should be defined');
+		}
+		this.#id = TickEvent.#nextId;
+		this.#time = time;
+		this.#callbacks = callbacks;
+	}
+}
diff --git a/src/lib/timer/tick.ts b/src/lib/timer/tick.ts
index e4ddda0..f40d4c6 100644
--- a/src/lib/timer/tick.ts
+++ b/src/lib/timer/tick.ts
@@ -1,4 +1,7 @@
+import { MultiMap } from '$/utils/multimap';
 import type { WithCleanup } from '$/utils/types';
+import type { ScoreTimestamp } from '../practice/types';
+import { TickEvent, type TickEventCallbacks, type TickEventOption } from './event';
 import TimerWorker from './timer-worker?worker';
 
 export interface TickState {
@@ -37,7 +40,7 @@ export class AudioClockTimer {
 	}
 
 	#isRunning = false;
-	#nextTick: number = 0;
+	#nextTickOnSecond: number = 0;
 	#tickPassed: number = 0;
 	#tickIntervalMs = 10;
 	get tickIntervalMs() {
@@ -52,21 +55,18 @@ export class AudioClockTimer {
 	start() {
 		if (!this.audioCtx) {
 			this.audioCtx = new AudioContext();
-
-			// unlock the audio context
-			const buffer = this.audioCtx.createBuffer(1, 1, 22050);
-			const node = this.audioCtx.createBufferSource();
-			node.buffer = buffer;
-			node.start(0);
-		}
-		if (!this.#isRunning) {
-			this.#startCallbacks.forEach((cb) => cb());
-			this.#isRunning = true;
-			// delay initial lookhead
-			this.#nextTick = this.audioCtx.currentTime + 0.1;
-			this.lookaheadTimer.postMessage('start');
+			this.audioCtx.resume();
 			this.#tickPassed = 0;
 		}
+		if (!this.#isRunning && this.audioCtx.state === 'running') {
+			Promise.all([...this.#beforeStartCallbacks].map((cb) => cb())).then(() => {
+				this.#isRunning = true;
+				// delay initial lookhead
+				this.#nextTickOnSecond = this.audioCtx!!.currentTime + 0.1;
+				this.lookaheadTimer.postMessage('start');
+				this.#startCallbacks.forEach((cb) => cb());
+			});
+		}
 	}
 
 	#tickQueue: TickState[] = [];
@@ -74,59 +74,160 @@ export class AudioClockTimer {
 		// schedule audio
 		// and push expected events to queues
 		// in this case, metronome ticks will be queued
-		while (this.#nextTick < this.audioCtx!!.currentTime + SCHEDULE_AHEAD_SEC) {
-			this.#audioTickCallbacks.forEach((cb) =>
-				cb({ audioCtx: this.audioCtx!!, time: this.#nextTick, tickPassed: this.#tickPassed })
-			);
-			this.#tickQueue.push({ time: this.#nextTick, tickPassed: this.#tickPassed });
+		while (this.#nextTickOnSecond < this.audioCtx!!.currentTime + SCHEDULE_AHEAD_SEC) {
+			const audioState = {
+				audioCtx: this.audioCtx!!,
+				time: this.#nextTickOnSecond,
+				tickPassed: this.#tickPassed
+			};
+
+			const scheduleIdList = this.#schedules.getAll(this.#tickPassed);
+			if (scheduleIdList) {
+				scheduleIdList.forEach((id) => {
+					const event = this.#events.get(id);
+					if (event && event.audio) {
+						event.audio(audioState);
+					}
+				});
+			}
+
+			this.#loopSchedules.forEach((id) => {
+				const event = this.#events.get(id);
+				if (event && event.interval) {
+					if (
+						event.start <= this.#tickPassed &&
+						(this.#tickPassed - event.start) % event.interval === 0
+					) {
+						if (event.audio) {
+							event.audio(audioState);
+						}
+					}
+				}
+			});
+
+			this.#tickQueue.push({ time: this.#nextTickOnSecond, tickPassed: this.#tickPassed });
 			this.#tickPassed += 1;
-			this.#nextTick += 0.001 * this.#tickIntervalMs;
+			this.#nextTickOnSecond += 0.001 * this.#tickIntervalMs;
 		}
 	}
+	#onAnimationFrame() {
+		if (this.audioCtx) {
+			const currentTime = this.audioCtx.currentTime;
+			let tickState = this.#tickQueue[0];
+			while (tickState !== undefined && tickState.time <= currentTime) {
+				this.#tickQueue.shift();
+
+				const cleanupIdList = this.#cleanupSchedules.getAll(tickState.tickPassed);
+				if (cleanupIdList) {
+					console.log(cleanupIdList);
+					cleanupIdList.forEach((id) => {
+						const event = this.#events.get(id);
+						if (event && event.cleanup) {
+							event.cleanup(tickState);
+						}
+					});
+				}
 
+				const scheduleIdList = this.#schedules.getAll(tickState.tickPassed);
+				if (scheduleIdList !== undefined) {
+					scheduleIdList.forEach((id) => {
+						const event = this.#events.get(id);
+						if (event && event.animation) {
+							event.animation(tickState);
+						}
+					});
+				}
+
+				this.#loopSchedules.forEach((id) => {
+					const event = this.#events.get(id);
+					if (event && event.interval) {
+						if (
+							event.start <= tickState.tickPassed &&
+							(tickState.tickPassed - event.start) % event.interval === 0
+						) {
+							if (event.animation) {
+								event.animation(tickState);
+							}
+						}
+					}
+				});
+				tickState = this.#tickQueue[0];
+			}
+		}
+		window.requestAnimationFrame(this.#onAnimationFrame.bind(this));
+	}
+
+	#beforeStartCallbacks: Set<() => Promise<any>> = new Set();
+	beforeStart(cb: () => Promise<any>) {
+		this.#beforeStartCallbacks.add(cb);
+		return () => this.removeStart(cb);
+	}
+	removeBeforeStart(cb: () => Promise<any>) {
+		this.#beforeStartCallbacks.delete(cb);
+	}
 	#startCallbacks: Set<() => any> = new Set();
 	onStart(cb: () => any) {
 		this.#startCallbacks.add(cb);
+		return () => this.removeStart(cb);
 	}
 	removeStart(cb: () => any) {
 		this.#startCallbacks.delete(cb);
 	}
-
-	#audioTickCallbacks: Set<AudioTickCallback> = new Set();
-	onAudioTick(cb: AudioTickCallback) {
-		this.#audioTickCallbacks.add(cb);
+	#stopCallbacks: Set<() => any> = new Set();
+	onStop(cb: () => any) {
+		this.#stopCallbacks.add(cb);
+		return () => this.removeStart(cb);
 	}
-	removeAudioTick(cb: AudioTickCallback) {
-		this.#audioTickCallbacks.delete(cb);
+	removeStop(cb: () => any) {
+		this.#stopCallbacks.delete(cb);
 	}
 
-	#tickCallbacks: Set<TickCallback> = new Set();
-	onTick(cb: TickCallback) {
-		this.#tickCallbacks.add(cb);
+	#schedules: MultiMap<number, number> = new MultiMap();
+	#cleanupSchedules: MultiMap<number, number> = new MultiMap();
+	#events: Map<number, TickEvent> = new Map();
+	schedule(event: TickEvent) {
+		this.#events.set(event.id, event);
+		this.#schedules.set(event.start, event.id);
+		if (event.duration) {
+			this.#cleanupSchedules.set(event.start + event.duration, event.id);
+		}
+		return event.id;
 	}
-	removeTick(cb: TickCallback) {
-		this.#tickCallbacks.delete(cb);
+
+	#loopSchedules: Set<number> = new Set();
+	scheduleLoop(event: TickEvent) {
+		this.#events.set(event.id, event);
+		this.#loopSchedules.add(event.id);
+		return event.id;
 	}
 
-	#onAnimationFrame() {
-		if (this.audioCtx) {
-			const currentTime = this.audioCtx.currentTime;
-			let tickState = this.#tickQueue[0];
-			while (tickState !== undefined && tickState.time <= currentTime) {
-				this.#tickQueue.shift();
-				this.#tickCallbacks.forEach((cb) => {
-					cb(tickState);
-				});
-				tickState = this.#tickQueue[0];
+	cancelSchedule(eventId: number) {
+		const event = this.#events.get(eventId);
+		if (event) {
+			this.#events.delete(eventId);
+			const schedulesOnTick = this.#schedules.getAll(event.start);
+			if (schedulesOnTick) {
+				const idx = schedulesOnTick.indexOf(eventId);
+				if (idx >= 0) schedulesOnTick.splice(idx, 1);
+			}
+
+			if (event.duration) {
+				const cleanupSchedulesOnTick = this.#cleanupSchedules.getAll(event.start + event.duration);
+				if (cleanupSchedulesOnTick) {
+					const idx = cleanupSchedulesOnTick.indexOf(eventId);
+					if (idx >= 0) cleanupSchedulesOnTick.splice(idx, 1);
+				}
 			}
 		}
-		window.requestAnimationFrame(this.#onAnimationFrame.bind(this));
 	}
 
 	stop() {
 		if (this.#isRunning) {
 			this.lookaheadTimer.postMessage('stop');
 			this.#isRunning = false;
+			this.#tickPassed = 0;
+			this.#tickQueue = [];
+			this.#stopCallbacks.forEach((cb) => cb());
 		}
 	}
 
@@ -144,20 +245,24 @@ export class AudioClockTimer {
 		}
 	}
 
-	clearSchedule() {
-		this.#audioTickCallbacks.clear();
-		this.#tickCallbacks.clear();
-	}
-
 	destroy() {
-		this.#audioTickCallbacks.clear();
-		this.#tickCallbacks.clear();
 		this.stop();
 	}
 }
 
 type TimeUnit = 'tick' | 'note' | 'beat' | 'bar' | 'second' | 'millisecond';
-
+export interface TempoSchedule {
+	time: ScoreTimestamp;
+	animation?: WithCleanup<TickCallback>;
+	audio?: AudioTickCallback;
+}
+export interface TempoState {
+	bpm: number;
+	ticksPerNote: number;
+	beatPerBar: number;
+	signatureUnit: number;
+	tickIntervalMs: number;
+}
 export class TempoTimer extends AudioClockTimer {
 	#bpm = 120;
 	get bpm() {
@@ -182,6 +287,7 @@ export class TempoTimer extends AudioClockTimer {
 	}
 	set beatPerBar(value: number) {
 		this.#beatPerBar = value;
+		this.#updateTickInterval();
 	}
 
 	#signatureUnit: number = 8;
@@ -209,12 +315,23 @@ export class TempoTimer extends AudioClockTimer {
 		throw new TypeError('Cannot set tickIntervalMs directly');
 	}
 
+	get tempoState(): TempoState {
+		return {
+			bpm: this.#bpm,
+			ticksPerNote: this.#ticksPerNote,
+			beatPerBar: this.#beatPerBar,
+			signatureUnit: this.#signatureUnit,
+			tickIntervalMs: this.tickIntervalMs
+		};
+	}
+
 	constructor() {
 		super();
 		this.#updateTickInterval();
 	}
 	#updateTickInterval() {
 		super.tickIntervalMs = (MS_PER_MIN * this.#signatureUnit) / (this.#bpm * this.#ticksPerNote);
+		this.#tempoChangedCallbacks.forEach((cb) => cb(this.tempoState));
 	}
 
 	/**
@@ -262,70 +379,48 @@ export class TempoTimer extends AudioClockTimer {
 		}
 	}
 
-	onTimeAfter(
-		time: { start: number; duration?: number },
-		cb: WithCleanup<TickCallback>,
-		audioCb: AudioTickCallback
-	) {
-		const start = this.convert(time.start, 'note', 'second');
-		const duration = time.duration ? this.convert(time.duration, 'note', 'second') : -1;
-
-		let currentTime = this.currentTime;
-		let cleanup: TickCallback | null = null;
-		const onStart: TickCallback = (state) => {
-			if (currentTime + start <= state.time) {
-				cleanup = cb(state) ?? null;
-				this.removeTick(onStart);
-			}
-		};
-		const onEnd: TickCallback = (state) => {
-			if (currentTime + start + duration <= state.time) {
-				if (cleanup) {
-					cleanup(state);
-				}
-				this.removeTick(onEnd);
-			}
-		};
-		const onAudioTick: AudioTickCallback = (state) => {
-			if (currentTime + start <= state.time) {
-				audioCb(state);
-				this.removeAudioTick(onAudioTick);
-			}
-		};
-
-		this.onTick(onStart);
-		if (duration > 0) {
-			this.onTick(onEnd);
-		}
-		this.onAudioTick(onAudioTick);
+	#tempoChangedCallbacks: Set<(state: TempoState) => any> = new Set();
+	onTempoChanged(cb: (state: TempoState) => any) {
+		this.#tempoChangedCallbacks.add(cb);
+	}
+	removeTempoChanged(cb: (state: TempoState) => any) {
+		this.#tempoChangedCallbacks.delete(cb);
 	}
 
-	loop(time: { start: number; duration?: number }, cb: TickCallback, audioCb: AudioTickCallback) {
-		const start = this.convert(time.start, 'note', 'second');
-		const duration = time.duration ? this.convert(time.duration, 'note', 'second') : -1;
+	scheduleOnTempo({ time, animation, audio }: TempoSchedule): number {
+		const start = this.convert(time.start, 'note', 'tick');
+		const duration = time.duration ? this.convert(time.duration, 'note', 'tick') : undefined;
+		const interval = time.interval ? this.convert(time.interval, 'note', 'tick') : undefined;
 
-		let currentTime = this.currentTime;
-		let tickSchedule = currentTime + start;
-		let audioTickSchedule = currentTime + start;
-		const onStart: TickCallback = (state) => {
-			while (tickSchedule <= state.time) {
-				cb(state);
-				tickSchedule += duration;
-			}
-		};
-		const onAudioTick: AudioTickCallback = (state) => {
-			if (audioTickSchedule <= state.time) {
-				audioCb(state);
-				audioTickSchedule += duration;
-			}
-		};
-		const stop = () => {
-			this.removeAudioTick(onAudioTick);
-			this.removeTick(onStart);
+		const callbacks: Partial<TickEventCallbacks> = {
+			animation: animation
+				? (state) => {
+						callbacks.cleanup = animation(state) ?? undefined;
+					}
+				: undefined,
+			audio
 		};
 
-		this.onTick(onStart);
-		this.onAudioTick(onAudioTick);
-		return stop;
+		return this.schedule(
+			new TickEvent({
+				time: { start, duration, interval },
+				callbacks
+			})
+		);
+	}
+	scheduleLoopOnTempo({ time, animation, audio }: TempoSchedule): number {
+		const start = this.convert(time.start, 'note', 'tick');
+		const duration = time.duration ? this.convert(time.duration, 'note', 'tick') : undefined;
+		const interval = time.interval ? this.convert(time.interval, 'note', 'tick') : undefined;
+
+		return this.scheduleLoop(
+			new TickEvent({
+				time: { start, duration, interval },
+				callbacks: {
+					animation,
+					audio
+				}
+			})
+		);
 	}
 }
diff --git a/src/routes/practice/(practice)/[category]/[slug]/+layout.svelte b/src/routes/practice/(practice)/[category]/[slug]/+layout.svelte
new file mode 100644
index 0000000..fe53b08
--- /dev/null
+++ b/src/routes/practice/(practice)/[category]/[slug]/+layout.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import MetronomeProvider from '$/lib/device/metronome/MetronomeProvider.svelte';
+	import RandomBoxProvider from '$/lib/practice/RandomBox/RandomBoxProvider.svelte';
+	import { TempoTimer } from '$/lib/timer/tick';
+	import type { LayoutData } from './$types';
+
+	export let data: LayoutData;
+	$: practice = data.pages.current.practice;
+	let timer = new TempoTimer();
+	$: {
+		timer.bpm = practice.tempo.bpm;
+		timer.beatPerBar = practice.tempo.beatPerBar;
+		timer.signatureUnit = practice.tempo.signatureUnit;
+	}
+
+	console.log(timer);
+</script>
+
+<MetronomeProvider {timer}>
+	<RandomBoxProvider items={practice.scores}>
+		<slot />
+	</RandomBoxProvider>
+</MetronomeProvider>
diff --git a/src/routes/practice/(practice)/[category]/[slug]/+page.svelte b/src/routes/practice/(practice)/[category]/[slug]/+page.svelte
index 9e8d233..92c0b45 100644
--- a/src/routes/practice/(practice)/[category]/[slug]/+page.svelte
+++ b/src/routes/practice/(practice)/[category]/[slug]/+page.svelte
@@ -1 +1,141 @@
-slug
+<script lang="ts">
+	import MetronomeBeats from '$/lib/device/metronome/MetronomeBeats.svelte';
+	import MetronomeOptions from '$/lib/device/metronome/MetronomeOptions.svelte';
+	import { getMetronomeContext } from '$/lib/device/metronome/context';
+	import FingerBoard, {
+		type FingerInfo,
+		type FingerPosition
+	} from '$/lib/guitar/finger-board/FingerBoard.svelte';
+	import RandomBoxOptions from '$/lib/practice/RandomBox/RandomBoxOptions.svelte';
+	import { getRandomBoxContext } from '$/lib/practice/RandomBox/context';
+	import type { PracticeScore } from '$/lib/practice/types';
+	import { getPitchFromFingerPosition, numberingPitch } from '$/utils/music/pitch';
+	import MetronomePlayButton from '$lib/device/metronome/MetronomePlayButton.svelte';
+	import { CacheStorage, Soundfont } from 'smplr';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	$: practice = data.pages.current.practice;
+
+	const metronome = getMetronomeContext();
+	const randomBox = getRandomBoxContext<PracticeScore>();
+
+	const timer = metronome.timer;
+	$: currentScore = practice.scores[0];
+	$: fretRange = currentScore.fretRange;
+	$: currentBoard = currentScore.boards[0];
+	let currentActiveFingers = new Set<number>();
+	let nextNotes: number[] = [];
+	$: fingers = (currentBoard?.fingers ?? []).map((finger) => {
+		const order = nextNotes.findIndex((f) => f === finger);
+		return {
+			position: currentScore.positions[finger],
+			style: {
+				color: currentActiveFingers.has(finger) ? 'red' : undefined
+				// scale: currentActiveFingers.has(finger) ? 1 : order >= 0 ? (4 - order) / 4 : 0.5
+			}
+		};
+	}) as FingerInfo[];
+
+	let guitarSoundfont: Soundfont | null = null;
+
+	$: practice,
+		(() => {
+			currentScore = replaceScore();
+		})();
+	function replaceScore() {
+		let score = randomBox.open();
+		const cancel = timer.beforeStart(async () => {
+			if (!guitarSoundfont) {
+				guitarSoundfont = new Soundfont(timer.audioCtx!!, {
+					instrument: 'acoustic_guitar_steel',
+					storage: new CacheStorage()
+				});
+			}
+			// preload soundfont
+			guitarSoundfont.load.then(() => {
+				console.count('afterload');
+				currentScheduleIdList.forEach((id) => {
+					timer.cancelSchedule(id);
+				});
+				scheduleScore(score);
+				cancel();
+			});
+		});
+		return score;
+	}
+
+	let currentScheduleIdList: number[] = [];
+	function scheduleScore(score: PracticeScore) {
+		/** Now scheduling */
+
+		// 1. board replacement
+		score.boards.map((board) => {
+			const boardScheduleId = timer.scheduleOnTempo({
+				time: board.time,
+				animation: () => {
+					console.log('replace board');
+					currentActiveFingers.clear();
+					currentBoard = board;
+				}
+			});
+			currentScheduleIdList.push(boardScheduleId);
+		});
+
+		// 2. notes
+		const notes = score.notes.map((note) => {
+			const pitch = getPitchFromFingerPosition(
+				score.positions[note.position] as FingerPosition,
+				practice.guitar.tuning
+			);
+			return { ...note, pitch };
+		});
+
+		for (let i = 0; i < notes.length; i++) {
+			const note = notes[i];
+			const nextThreeFingers = notes.slice(i + 1, i + 4).map((n) => n.position);
+			const noteScheduleId = timer.scheduleOnTempo({
+				time: note.time,
+				animation: () => {
+					currentActiveFingers.add(note.position);
+					currentActiveFingers = currentActiveFingers;
+					nextNotes = nextThreeFingers;
+					return () => {
+						console.log('?');
+						currentActiveFingers.delete(note.position);
+						currentActiveFingers = currentActiveFingers;
+					};
+				},
+				audio: ({ audioCtx, time }) => {
+					// play audio with pitch
+					if (note.pitch) {
+						guitarSoundfont!!.start({
+							note: numberingPitch(note.pitch) + 12,
+							time: time,
+							duration: note.time.duration
+								? timer.convert(note.time.duration, 'note', 'second')
+								: note.time.duration
+						});
+					}
+				}
+			});
+			currentScheduleIdList.push(noteScheduleId);
+		}
+	}
+</script>
+
+<div class="h-full w-screen">
+	<div class="relative h-full">
+		<div class="absolute right-0 z-10 flex h-[60px] w-screen flex-row items-center justify-between">
+			<div class="ml-4 flex h-full flex-row items-start justify-between gap-4">
+				<MetronomeOptions />
+				<RandomBoxOptions />
+			</div>
+		</div>
+		<div class="relative flex h-full flex-col items-center justify-center">
+			<FingerBoard class="" readonly {fingers} {fretRange}></FingerBoard>
+			<MetronomeBeats class="p-20" />
+			<MetronomePlayButton class="h-20" />
+		</div>
+	</div>
+</div>
diff --git a/src/routes/tools/metronome/+layout.svelte b/src/routes/tools/metronome/+layout.svelte
index a5b50fa..91df810 100644
--- a/src/routes/tools/metronome/+layout.svelte
+++ b/src/routes/tools/metronome/+layout.svelte
@@ -8,8 +8,12 @@
 <script lang="ts">
 	import MetronomeProvider from '$/lib/device/metronome/MetronomeProvider.svelte';
 	import type { FingerInfo } from '$/lib/guitar/finger-board/FingerBoard.svelte';
+	import { TempoTimer } from '$/lib/timer/tick';
+
+	const timer = new TempoTimer();
+	timer.bpm = 127;
 </script>
 
-<MetronomeProvider>
+<MetronomeProvider {timer}>
 	<slot />
 </MetronomeProvider>
diff --git a/src/routes/tools/metronome/+page.svelte b/src/routes/tools/metronome/+page.svelte
index 0fdc8bc..3f16cdb 100644
--- a/src/routes/tools/metronome/+page.svelte
+++ b/src/routes/tools/metronome/+page.svelte
@@ -1,13 +1,7 @@
 <script lang="ts">
 	import MetronomeBeats from '$/lib/device/metronome/MetronomeBeats.svelte';
 	import MetronomeOptions from '$/lib/device/metronome/MetronomeOptions.svelte';
-	import { getMetronomeContext } from '$/lib/device/metronome/context';
-	import { Play, Stop } from '@steeze-ui/heroicons';
-	import { Icon } from '@steeze-ui/svelte-icon';
-
-	const metronome = getMetronomeContext();
-
-	let isRunning: boolean = metronome.isRunning;
+	import MetronomePlayButton from '$/lib/device/metronome/MetronomePlayButton.svelte';
 </script>
 
 <div class="h-full w-screen">
@@ -16,22 +10,10 @@
 			<div class="ml-4 flex h-full flex-row items-start justify-between gap-4">
 				<MetronomeOptions />
 			</div>
-			<button
-				class="mr-8 flex aspect-square h-3/4 items-center justify-center rounded-full bg-indigo-900 p-0 focus:outline-none"
-				on:click={() => {
-					metronome.toggle();
-					isRunning = metronome.isRunning;
-				}}
-			>
-				{#if isRunning}
-					<Icon class="m-0 h-[20px] w-[20px] p-0 text-indigo-100" src={Stop} theme="solid" />
-				{:else}
-					<Icon class="m-0 h-[20px] w-[20px] p-0 text-indigo-100" src={Play} theme="solid" />
-				{/if}
-			</button>
 		</div>
 		<div class="relative flex h-full flex-col items-center justify-center">
-			<MetronomeBeats />
+			<MetronomeBeats class="p-20" />
+			<MetronomePlayButton class="h-20" />
 		</div>
 	</div>
 </div>
diff --git a/src/routes/tools/render-sample/+layout.svelte b/src/routes/tools/render-sample/+layout.svelte
deleted file mode 100644
index f84bd4f..0000000
--- a/src/routes/tools/render-sample/+layout.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts" context="module">
-	export interface Board {
-		title: string;
-		fingers: FingerInfo[];
-	}
-</script>
-
-<script lang="ts">
-	import MetronomeProvider from '$/lib/device/metronome/MetronomeProvider.svelte';
-	import type { FingerInfo } from '$/lib/guitar/finger-board/FingerBoard.svelte';
-	import RandomBoxProvider from '$/lib/practice/RandomBox/RandomBoxProvider.svelte';
-	import { practice } from './data';
-</script>
-
-<MetronomeProvider
-	bpm={practice.tempo.bpm}
-	beatPerBar={practice.tempo.beatPerBar}
-	signatureUnit={practice.tempo.signatureUnit}
->
-	<RandomBoxProvider items={practice.scores}>
-		<slot />
-	</RandomBoxProvider>
-</MetronomeProvider>
diff --git a/src/routes/tools/render-sample/+page.svelte b/src/routes/tools/render-sample/+page.svelte
deleted file mode 100644
index 7f2fbe0..0000000
--- a/src/routes/tools/render-sample/+page.svelte
+++ /dev/null
@@ -1,152 +0,0 @@
-<script lang="ts">
-	import MetronomeBeats from '$/lib/device/metronome/MetronomeBeats.svelte';
-	import MetronomeOptions from '$/lib/device/metronome/MetronomeOptions.svelte';
-	import MetronomePlayButton from '$/lib/device/metronome/MetronomePlayButton.svelte';
-	import { getMetronomeContext } from '$/lib/device/metronome/context';
-	import type { OnBarCallback, OnOptionChangeCallback } from '$/lib/device/metronome/metronome';
-	import FingerBoard, {
-		type FingerInfo,
-		type FingerPosition
-	} from '$/lib/guitar/finger-board/FingerBoard.svelte';
-	import RandomBoxOptions from '$/lib/practice/RandomBox/RandomBoxOptions.svelte';
-	import { getRandomBoxContext } from '$/lib/practice/RandomBox/context';
-	import type { PracticeBoard, PracticeScore } from '$/lib/practice/types';
-	import { getPitchFromFingerPosition, numberingPitch } from '$/utils/music/pitch';
-	import { onDestroy, onMount } from 'svelte';
-	import { practice } from './data';
-	import { Soundfont, CacheStorage } from 'smplr';
-
-	const metronome = getMetronomeContext();
-	const randomBox = getRandomBoxContext<(typeof practice.scores)[number]>();
-
-	const timer = metronome.timer;
-	let score = replaceScore();
-	let isRunning: boolean = metronome.isRunning;
-
-	function replaceScore() {
-		let score = randomBox.open();
-		const schedule = () => {
-			if (!guitarSoundfont) {
-				guitarSoundfont = new Soundfont(timer.audioCtx!!, {
-					instrument: 'acoustic_guitar_steel',
-					storage: new CacheStorage()
-				});
-			}
-			// preload soundfont
-			guitarSoundfont.load.then(() => {
-				metronome.schedule();
-				scheduleScore(score);
-			});
-		};
-		timer.onStart(schedule);
-		return score;
-	}
-
-	let currentBoard: PracticeBoard = score.boards[0];
-	let currentActiveFingers = new Set<number>();
-	let nextNotes: number[] = [];
-	$: fingers = (currentBoard?.fingers ?? []).map((finger) => {
-		const order = nextNotes.findIndex((f) => f === finger);
-		return {
-			position: score.positions[finger],
-			style: {
-				color: currentActiveFingers.has(finger) ? 'red' : undefined
-				// scale: currentActiveFingers.has(finger) ? 1 : order >= 0 ? (4 - order) / 4 : 0.5
-			}
-		};
-	}) as FingerInfo[];
-
-	let guitarSoundfont: Soundfont | null = null;
-
-	let previousTime = 0;
-	function scheduleScore(score: PracticeScore) {
-		/** Now scheduling */
-
-		// 1. board replacement
-		score.boards.map((board) => {
-			timer.onTimeAfter(
-				board.time,
-				() => {
-					currentActiveFingers.clear();
-					currentBoard = board;
-				},
-				({ audioCtx }) => {
-					// guitarSoundfont!!.start({
-					// 	note: 50 + 12
-					// });
-				}
-			);
-		});
-
-		// 2. notes
-		const notes = score.notes.map((note) => {
-			const pitch = getPitchFromFingerPosition(
-				score.positions[note.position] as FingerPosition,
-				practice.guitar.tuning
-			);
-			return { ...note, pitch };
-		});
-
-		for (let i = 0; i < notes.length; i++) {
-			const note = notes[i];
-			const nextThreeFingers = notes.slice(i + 1, i + 4).map((n) => n.position);
-			timer.onTimeAfter(
-				note.time,
-				() => {
-					currentActiveFingers.add(note.position);
-					currentActiveFingers = currentActiveFingers;
-					nextNotes = nextThreeFingers;
-					return () => {
-						currentActiveFingers.delete(note.position);
-						currentActiveFingers = currentActiveFingers;
-					};
-				},
-				({ audioCtx, time }) => {
-					// play audio with pitch
-					if (note.pitch) {
-						guitarSoundfont!!.start({
-							note: numberingPitch(note.pitch) + 12,
-							time: time,
-							duration: note.time.duration
-								? timer.convert(note.time.duration, 'note', 'second')
-								: note.time.duration
-						});
-					}
-				}
-			);
-		}
-	}
-
-	onMount(() => {
-		metronome.onBar(onMetronomeBar);
-		metronome.onOptionChange(onMetronomeOptionChange);
-	});
-
-	onDestroy(() => {
-		metronome.removeBar(onMetronomeBar);
-		metronome.removeOptionChange(onMetronomeOptionChange);
-	});
-
-	const onMetronomeBar: OnBarCallback = () => {
-		// score = replaceScore();
-	};
-	const onMetronomeOptionChange: OnOptionChangeCallback = ({ bpm }) => {
-		// timer.tickIntervalMs = calcTickIntervalMs(bpm);
-	};
-</script>
-
-<div class="h-full w-screen">
-	<div class="relative h-full">
-		<div class="absolute right-0 z-10 flex h-[60px] w-screen flex-row items-center justify-between">
-			<div class="ml-4 flex h-full flex-row items-start justify-between gap-4">
-				<MetronomeOptions />
-				<RandomBoxOptions />
-			</div>
-		</div>
-		<div class="relative flex h-full flex-col items-center justify-center">
-			<FingerBoard class="" readonly {fingers} fretRange={score.fretRange}></FingerBoard>
-			<MetronomeBeats class="p-20" />
-			<MetronomePlayButton class="h-20" />
-		</div>
-	</div>
-</div>
diff --git a/src/routes/tools/render-sample/data.ts b/src/routes/tools/render-sample/data.ts
deleted file mode 100644
index 002816d..0000000
--- a/src/routes/tools/render-sample/data.ts
+++ /dev/null
@@ -1,325 +0,0 @@
-import type { Practice } from '$/lib/practice/types';
-import { TUNE } from '$/utils/music/pitch';
-
-const practices: Record<string, Practice> = {
-	// root: {
-	// 	tempo: {
-	// 		bpm: 120,
-	// 		beatPerBar: 6,
-	// 		signatureUnit: 8
-	// 	},
-	// 	guitar: {
-	// 		tuning: TUNE.standard,
-	// 		fretRange: {
-	// 			start: 0,
-	// 			end: 12,
-	// 			visibility: 'end'
-	// 		}
-	// 	},
-	// 	scores: [
-	// 		{
-	// 			notes: [
-	// 				{ position: { fret: 'open', line: 6 }, time: { start: 0, duration: 1 / 8 } },
-	// 				{ position: { fret: 7, line: 5 }, time: { start: 1 / 8, duration: 1 / 8 } },
-	// 				{ position: { fret: 2, line: 4 }, time: { start: 2 / 8, duration: 1 / 8 } },
-	// 				{ position: { fret: 9, line: 3 }, time: { start: 3 / 8, duration: 1 / 8 } },
-	// 				{ position: { fret: 5, line: 2 }, time: { start: 4 / 8, duration: 1 / 8 } },
-	// 				{ position: { fret: 'open', line: 1 }, time: { start: 5 / 8, duration: 1 / 8 } }
-	// 			],
-	// 			boards: [
-	// 				{
-	// 					title: 'E',
-	// 					fingers: [0, 1, 2, 3, 4, 5],
-	// 					time: { start: 0 }
-	// 				}
-	// 			]
-	// 		},
-	// 		{
-	// 			notes: [
-	// 				{ position: { fret: 1, line: 6 }, time: { start: 0, duration: 1 / 8 } },
-	// 				{ position: { fret: 8, line: 5 }, time: { start: 1 / 8, duration: 1 / 8 } },
-	// 				{ position: { fret: 3, line: 4 }, time: { start: 2 / 8, duration: 1 / 8 } },
-	// 				{ position: { fret: 10, line: 3 }, time: { start: 3 / 8, duration: 1 / 8 } },
-	// 				{ position: { fret: 6, line: 2 }, time: { start: 4 / 8, duration: 1 / 8 } },
-	// 				{ position: { fret: 1, line: 1 }, time: { start: 5 / 8, duration: 1 / 8 } }
-	// 			],
-	// 			boards: [
-	// 				{
-	// 					title: 'E',
-	// 					fingers: [0, 1, 2, 3, 4, 5],
-	// 					time: { start: 0, duration: 6 / 8 }
-	// 				}
-	// 			]
-	// 		}
-	// 	]
-	// },
-	'major-scale': {
-		tempo: {
-			bpm: 120,
-			beatPerBar: 4,
-			signatureUnit: 4
-		},
-		guitar: {
-			tuning: TUNE.standard
-		},
-		scores: [
-			{
-				positions: [
-					{ line: 6, fret: 8 },
-					{ line: 6, fret: 10 },
-					{ line: 5, fret: 7 },
-					{ line: 5, fret: 8 },
-					{ line: 5, fret: 10 },
-					{ line: 4, fret: 7 },
-					{ line: 4, fret: 9 },
-					{ line: 4, fret: 10 },
-					{ line: 3, fret: 7 },
-					{ line: 3, fret: 9 },
-					{ line: 3, fret: 10 },
-					{ line: 2, fret: 8 },
-					{ line: 2, fret: 10 },
-					{ line: 1, fret: 7 },
-					{ line: 1, fret: 8 },
-					{ line: 1, fret: 10 },
-					{ line: 6, fret: 7 }
-				],
-				notes: [
-					{ position: 0, time: { start: 0, duration: 0.0625 } },
-					{ position: 1, time: { start: 0.0625, duration: 0.0625 } },
-					{ position: 2, time: { start: 0.125, duration: 0.0625 } },
-					{ position: 3, time: { start: 0.1875, duration: 0.0625 } },
-					{ position: 4, time: { start: 0.25, duration: 0.0625 } },
-					{ position: 5, time: { start: 0.3125, duration: 0.0625 } },
-					{ position: 6, time: { start: 0.375, duration: 0.0625 } },
-					{ position: 7, time: { start: 0.4375, duration: 0.0625 } },
-					{ position: 8, time: { start: 0.5, duration: 0.0625 } },
-					{ position: 9, time: { start: 0.5625, duration: 0.0625 } },
-					{ position: 10, time: { start: 0.625, duration: 0.0625 } },
-					{ position: 11, time: { start: 0.6875, duration: 0.0625 } },
-					{ position: 12, time: { start: 0.75, duration: 0.0625 } },
-					{ position: 13, time: { start: 0.8125, duration: 0.0625 } },
-					{ position: 14, time: { start: 0.875, duration: 0.0625 } },
-					{ position: 15, time: { start: 0.9375, duration: 0.0625 } },
-					{ position: 14, time: { start: 1, duration: 0.0625 } },
-					{ position: 13, time: { start: 1.0625, duration: 0.0625 } },
-					{ position: 12, time: { start: 1.125, duration: 0.0625 } },
-					{ position: 11, time: { start: 1.1875, duration: 0.0625 } },
-					{ position: 10, time: { start: 1.25, duration: 0.0625 } },
-					{ position: 9, time: { start: 1.3125, duration: 0.0625 } },
-					{ position: 8, time: { start: 1.375, duration: 0.0625 } },
-					{ position: 7, time: { start: 1.4375, duration: 0.0625 } },
-					{ position: 6, time: { start: 1.5, duration: 0.0625 } },
-					{ position: 5, time: { start: 1.5625, duration: 0.0625 } },
-					{ position: 4, time: { start: 1.625, duration: 0.0625 } },
-					{ position: 3, time: { start: 1.6875, duration: 0.0625 } },
-					{ position: 2, time: { start: 1.75, duration: 0.0625 } },
-					{ position: 1, time: { start: 1.8125, duration: 0.0625 } },
-					{ position: 0, time: { start: 1.875, duration: 0.0625 } },
-					{ position: 16, time: { start: 1.9375, duration: 0.0625 } },
-					{ position: 0, time: { start: 2, duration: 0.0625 } }
-				],
-				boards: [
-					{
-						title: 'C line 1',
-						fingers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
-						time: { start: 0 }
-					},
-					{
-						title: 'C line 2',
-						fingers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
-						time: { start: 15 / 16 }
-					}
-				],
-				fretRange: {
-					start: 5,
-					end: 11,
-					visibility: 'all'
-				}
-			}
-		]
-	},
-	'rhythm-test': {
-		tempo: {
-			bpm: 120,
-			beatPerBar: 4,
-			signatureUnit: 4
-		},
-		guitar: {
-			tuning: TUNE.standard
-		},
-		scores: [
-			{
-				positions: [
-					{ line: 5, fret: 3 },
-					{ line: 6, fret: 3 },
-					{ line: 1, fret: 'open' },
-					{ line: 2, fret: 1 },
-					{ line: 3, fret: 'open' }
-				],
-				notes: [
-					{ position: 0, time: { start: 0, duration: 1 / 4 } },
-					{ position: 2, time: { start: 1 / 4, duration: 1 / 4 } },
-					{ position: 3, time: { start: 1 / 4, duration: 1 / 4 } },
-					{ position: 4, time: { start: 1 / 4, duration: 1 / 4 } },
-					{ position: 1, time: { start: 2 / 4, duration: 1 / 4 } },
-					{ position: 2, time: { start: 3 / 4, duration: 1 / 4 } },
-					{ position: 3, time: { start: 3 / 4, duration: 1 / 4 } },
-					{ position: 4, time: { start: 3 / 4, duration: 1 / 4 } },
-					{ position: 0, time: { start: 4 / 4, duration: 1 / 4 } },
-					{ position: 2, time: { start: 5 / 4, duration: 1 / 4 } },
-					{ position: 3, time: { start: 5 / 4, duration: 1 / 4 } },
-					{ position: 4, time: { start: 5 / 4, duration: 1 / 4 } },
-					{ position: 1, time: { start: 6 / 4, duration: 1 / 4 } },
-					{ position: 2, time: { start: 7 / 4, duration: 1 / 4 } },
-					{ position: 3, time: { start: 7 / 4, duration: 1 / 4 } },
-					{ position: 4, time: { start: 7 / 4, duration: 1 / 4 } },
-					{ position: 0, time: { start: 8 / 4, duration: 1 / 4 } },
-					{ position: 2, time: { start: 9 / 4, duration: 1 / 4 } },
-					{ position: 3, time: { start: 9 / 4, duration: 1 / 4 } },
-					{ position: 4, time: { start: 9 / 4, duration: 1 / 4 } },
-					{ position: 1, time: { start: 10 / 4, duration: 1 / 4 } },
-					{ position: 2, time: { start: 11 / 4, duration: 1 / 4 } },
-					{ position: 3, time: { start: 11 / 4, duration: 1 / 4 } },
-					{ position: 4, time: { start: 11 / 4, duration: 1 / 4 } },
-					{ position: 0, time: { start: 12 / 4, duration: 1 / 4 } },
-					{ position: 2, time: { start: 13 / 4, duration: 1 / 4 } },
-					{ position: 3, time: { start: 13 / 4, duration: 1 / 4 } },
-					{ position: 4, time: { start: 13 / 4, duration: 1 / 4 } },
-					{ position: 1, time: { start: 14 / 4, duration: 1 / 4 } },
-					{ position: 2, time: { start: 15 / 4, duration: 1 / 4 } },
-					{ position: 3, time: { start: 15 / 4, duration: 1 / 4 } },
-					{ position: 4, time: { start: 15 / 4, duration: 1 / 4 } }
-				],
-				boards: [
-					{
-						title: 'C line 1',
-						fingers: [0, 2, 3, 4],
-						time: { start: 0 }
-					},
-					{
-						title: 'C line 1',
-						fingers: [1, 2, 3, 4],
-						time: { start: 1 / 2 }
-					},
-					{
-						title: 'C line 1',
-						fingers: [0, 2, 3, 4],
-						time: { start: 2 / 2 }
-					},
-					{
-						title: 'C line 1',
-						fingers: [1, 2, 3, 4],
-						time: { start: 3 / 2 }
-					},
-					{
-						title: 'C line 1',
-						fingers: [0, 2, 3, 4],
-						time: { start: 4 / 2 }
-					},
-					{
-						title: 'C line 1',
-						fingers: [1, 2, 3, 4],
-						time: { start: 5 / 2 }
-					},
-					{
-						title: 'C line 1',
-						fingers: [0, 2, 3, 4],
-						time: { start: 6 / 2 }
-					},
-					{
-						title: 'C line 1',
-						fingers: [1, 2, 3, 4],
-						time: { start: 7 / 2 }
-					}
-				],
-				fretRange: {
-					start: 0,
-					end: 12,
-					visibility: 'all'
-				}
-			}
-		]
-	}
-};
-
-export const practice: Practice = practices['rhythm-test'];
-
-export const items = [
-	{
-		title: 'E',
-		fingers: [
-			{ position: { fret: 'open', line: 6 }, text: 'E' },
-			{ position: { fret: 7, line: 5 }, text: 'E' },
-			{ position: { fret: 2, line: 4 }, text: 'E' },
-			{ position: { fret: 9, line: 3 }, text: 'E' },
-			{ position: { fret: 5, line: 2 }, text: 'E' },
-			{ position: { fret: 'open', line: 1 }, text: 'E' }
-		]
-	},
-	{
-		title: 'F',
-		fingers: [
-			{ position: { fret: 1, line: 6 } },
-			{ position: { fret: 1, line: 1 } },
-			{ position: { fret: 3, line: 4 } },
-			{ position: { fret: 6, line: 2 } },
-			{ position: { fret: 8, line: 5 } },
-			{ position: { fret: 10, line: 3 } }
-		]
-	},
-	{
-		title: 'G',
-		fingers: [
-			{ position: { fret: 3, line: 6 } },
-			{ position: { fret: 5, line: 4 } },
-			{ position: { fret: 8, line: 2 } },
-			{ position: { fret: 10, line: 5 } },
-			{ position: { fret: 'open', line: 3 } },
-			{ position: { fret: 3, line: 1 } }
-		]
-	},
-	{
-		title: 'A',
-		fingers: [
-			{ position: { fret: 5, line: 6 } },
-			{ position: { fret: 7, line: 4 } },
-			{ position: { fret: 10, line: 2 } },
-			{ position: { fret: 'open', line: 5 } },
-			{ position: { fret: 2, line: 3 } },
-			{ position: { fret: 5, line: 1 } }
-		]
-	},
-	{
-		title: 'B',
-		fingers: [
-			{ position: { fret: 2, line: 5 } },
-			{ position: { fret: 4, line: 3 } },
-			{ position: { fret: 7, line: 1 } },
-			{ position: { fret: 7, line: 6 } },
-			{ position: { fret: 9, line: 4 } },
-			{ position: { fret: 'open', line: 2 } }
-		]
-	},
-	{
-		title: 'C',
-		fingers: [
-			{ position: { fret: 3, line: 5 } },
-			{ position: { fret: 5, line: 3 } },
-			{ position: { fret: 8, line: 1 } },
-			{ position: { fret: 8, line: 6 } },
-			{ position: { fret: 10, line: 4 } },
-			{ position: { fret: 1, line: 2 } }
-		]
-	},
-	{
-		title: 'D',
-		fingers: [
-			{ position: { fret: 'open', line: 4 } },
-			{ position: { fret: 2, line: 2 } },
-			{ position: { fret: 5, line: 5 } },
-			{ position: { fret: 7, line: 3 } },
-			{ position: { fret: 10, line: 1 } },
-			{ position: { fret: 10, line: 6 } }
-		]
-	}
-];
diff --git a/src/utils/multimap.ts b/src/utils/multimap.ts
new file mode 100644
index 0000000..e50d4bb
--- /dev/null
+++ b/src/utils/multimap.ts
@@ -0,0 +1,60 @@
+export class MultiMap<K, V> extends Map {
+	clear(): void {
+		super.clear();
+	}
+	delete(key: K): boolean {
+		return super.delete(key);
+	}
+	getAll(key: K): V[] | undefined {
+		return super.get(key);
+	}
+	getFirst(key: K): V | undefined {
+		const values = super.get(key);
+		return values ? values[0] : undefined;
+	}
+	has(key: K): boolean {
+		return super.has(key);
+	}
+	set(key: K, value: V): this {
+		let values = super.get(key);
+		if (values === undefined) {
+			values = [];
+			super.set(key, values);
+		}
+		values.push(value);
+		return this;
+	}
+	*[Symbol.iterator](): IterableIterator<[K, V]> {
+		for (const [k, values] of super[Symbol.iterator]()) {
+			for (const v of values) {
+				yield [k, v];
+			}
+		}
+	}
+	*keys(): IterableIterator<K> {
+		for (const k of super.keys()) {
+			yield k;
+		}
+	}
+	*values(): IterableIterator<V> {
+		for (const values of super.values()) {
+			for (const v of values) {
+				yield v;
+			}
+		}
+	}
+	*entries(): IterableIterator<[K, V[]]> {
+		for (const [k, values] of super[Symbol.iterator]()) {
+			for (const v of values) {
+				yield [k, v];
+			}
+		}
+	}
+	forEach(callbackfn: (value: V, key: K, map: Map<K, V[]>) => void, thisArg?: any): void {
+		super.forEach((k, values, map) => {
+			values.forEach((v: V) => {
+				callbackfn(v, k, map);
+			});
+		}, thisArg);
+	}
+}