{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "audio-wave",
	"title": "Audio Wave",
	"type": "registry:ui",
	"description": "An audio visualization component",
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from '$UTILS$';\n\n\tlet {\n\t\tplaying = true,\n\t\tbars = 4,\n\t\tclass: className,\n\t\tbarColor = 'bg-primary',\n\t\t...rest\n\t}: {\n\t\tplaying?: boolean;\n\t\tbars?: number;\n\t\tclass?: string;\n\t\tbarColor?: string;\n\t\t[key: string]: any;\n\t} = $props();\n\n\tlet heights = $state(Array(bars).fill(0.25));\n\tlet frame: number;\n\n\tfunction lerp(start: number, end: number, factor: number) {\n\t\treturn start + (end - start) * factor;\n\t}\n\n\t$effect(() => {\n\t\tif (heights.length !== bars) {\n\t\t\theights = Array(bars).fill(0.25);\n\t\t}\n\n\t\tconst animate = () => {\n\t\t\tconst time = performance.now() / 1000;\n\n\t\t\theights = heights.map((h, i) => {\n\t\t\t\tlet target = 0.25;\n\n\t\t\t\tif (playing) {\n\t\t\t\t\tconst input = (time - i * 0.15) * (Math.PI * 2);\n\t\t\t\t\tconst sine = (Math.sin(input) + 1) / 2;\n\t\t\t\t\ttarget = 0.25 + sine * 0.75;\n\t\t\t\t}\n\n\t\t\t\treturn lerp(h, target, 0.15);\n\t\t\t});\n\n\t\t\tframe = requestAnimationFrame(animate);\n\t\t};\n\n\t\tframe = requestAnimationFrame(animate);\n\n\t\treturn () => cancelAnimationFrame(frame);\n\t});\n</script>\n\n<div class={cn('flex items-end justify-center gap-0.5 h-8', className)} {...rest}>\n\t{#each heights as height, i}\n\t\t<div class={cn('w-1 rounded-sm', barColor)} style=\"height: {height * 100}%;\"></div>\n\t{/each}\n</div>\n",
			"type": "registry:ui",
			"target": "audio-wave/audio-wave.svelte"
		},
		{
			"content": "import AudioWave from './audio-wave.svelte';\nexport { AudioWave };\n",
			"type": "registry:ui",
			"target": "audio-wave/index.ts"
		}
	]
}