BeatWeave Multi-Theme Metronome UI Cards

<section class="bg-gray-950 min-h-screen flex flex-col md:flex-row font-sans antialiased text-gray-100 selection:bg-gray-800 m-0 p-0 overflow-x-hidden">
<div class="flex-1 bg-slate-950 flex items-center justify-center p-8 min-h-screen relative overflow-hidden">
        <div class="absolute inset-0 pointer-events-none opacity-[0.03]" style="background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 24px 24px;"></div>
        <div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-[320px] border-x border-white/[0.05] pointer-events-none z-0"></div>
        <div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-[500px] border-x border-white/[0.03] pointer-events-none z-0 hidden xl:block"></div>
        <div class="absolute left-6 top-1/2 -translate-y-1/2 rotate-[-90deg] text-xs tracking-widest text-gray-500 font-light hidden lg:block">CELESTE</div>
        <div class="w-full max-w-[320px] bg-slate-900 rounded-[2.5rem] p-8 flex flex-col items-center relative z-10 border border-white/[0.06]" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);">
            <div class="flex justify-between w-full items-center mb-6 pb-6 border-b border-white/[0.06]">
                <iconify-icon icon="solar:tuning-square-linear" stroke-width="1.5" class="text-xl opacity-70"></iconify-icon>
                <div class="flex items-center gap-2">
                    <canvas id="pulse1" width="40" height="20" class="w-10 h-5"></canvas>
                    <span class="text-xs font-light tracking-widest uppercase opacity-90">BeatWeave</span>
                </div>
                <iconify-icon icon="solar:hamburger-menu-linear" stroke-width="1.5" class="text-xl opacity-70"></iconify-icon>
            </div>
            <div class="text-lg font-extralight mb-3">6/8</div>
            <div class="flex gap-3 mb-6 items-center h-2">
                <div class="w-1 h-1 rounded-full bg-gray-600"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-teal-400"></div>
                <div class="w-1 h-1 rounded-full bg-gray-600"></div>
                <div class="w-1 h-1 rounded-full bg-gray-600"></div>
            </div>
            <div class="relative w-full flex items-center justify-center mb-8">
                <div class="absolute w-full border-t border-white/10"></div>
                <div class="z-10 bg-slate-900 px-3">
                    <iconify-icon icon="solar:settings-linear" stroke-width="1.5" class="text-lg opacity-50"></iconify-icon>
                </div>
            </div>
            <div class="flex items-center justify-between w-full px-2 mb-4">
                <button aria-label="Decrease BPM" onclick="adjustBpm('bpm1', -5)"><iconify-icon icon="solar:minus-linear" stroke-width="1.5" class="text-2xl opacity-70 cursor-pointer hover:opacity-100 transition-opacity"></iconify-icon></button>
                <div class="flex flex-col items-center border-x border-white/[0.06] px-8">
                    <span id="bpm1" class="text-6xl font-thin tracking-tight" data-value="110">110</span>
                    <span class="text-xs opacity-50 tracking-widest mt-1 font-light">BPM</span>
                </div>
                <button aria-label="Increase BPM" onclick="adjustBpm('bpm1', 5)"><iconify-icon icon="solar:add-linear" stroke-width="1.5" class="text-2xl opacity-70 cursor-pointer hover:opacity-100 transition-opacity"></iconify-icon></button>
            </div>
            <div class="relative w-64 h-64 mt-4 flex items-center justify-center">
                <canvas id="dial1" width="256" height="256" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
                <button class="w-36 h-36 rounded-full bg-slate-900 flex items-center justify-center z-10 active:scale-95 transition-transform duration-150 group border border-white/5" style="box-shadow: 12px 12px 24px #020617, -12px -12px 24px #1e293b;">
                    <span class="text-xs font-light tracking-widest opacity-50 group-active:opacity-70 transition-opacity">TAP</span>
                </button>
                <div class="absolute bottom-6 left-8 text-xs tracking-widest opacity-40 font-light">MIN</div>
                <div class="absolute bottom-6 right-8 text-xs tracking-widest opacity-40 font-light">MAX</div>
            </div>
            <div class="flex justify-between items-center w-full mt-8 pt-6 border-t border-white/[0.06] px-2">
                <button aria-label="Volume"><iconify-icon icon="solar:volume-loud-linear" stroke-width="1.5" class="text-xl opacity-70 hover:opacity-100 transition-opacity"></iconify-icon></button>
                <button aria-label="Play"><iconify-icon icon="solar:play-linear" stroke-width="1.5" class="text-2xl opacity-90 hover:opacity-100 transition-opacity"></iconify-icon></button>
                <button aria-label="Music Notes"><iconify-icon icon="solar:music-note-linear" stroke-width="1.5" class="text-xl opacity-70 hover:opacity-100 transition-opacity"></iconify-icon></button>
            </div>
        </div>
    </div>

<div class="flex-1 bg-gray-950 flex items-center justify-center p-8 min-h-screen relative overflow-hidden">
        <div class="absolute inset-0 pointer-events-none opacity-[0.03]" style="background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 24px 24px;"></div>
        <div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-[320px] border-x border-white/[0.05] pointer-events-none z-0"></div>
        <div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-[500px] border-x border-white/[0.03] pointer-events-none z-0 hidden xl:block"></div>
        <div class="absolute left-6 top-1/2 -translate-y-1/2 rotate-[-90deg] text-xs tracking-widest text-gray-500 font-light hidden lg:block">GLACIER</div>
        <div class="w-full max-w-[320px] bg-gray-900 rounded-[2.5rem] p-8 flex flex-col items-center relative z-10 border border-white/[0.06]" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);">
            <div class="flex justify-between w-full items-center mb-6 pb-6 border-b border-white/[0.06]">
                <iconify-icon icon="solar:tuning-square-linear" stroke-width="1.5" class="text-xl opacity-70"></iconify-icon>
                <div class="flex items-center gap-2">
                    <canvas id="pulse2" width="40" height="20" class="w-10 h-5"></canvas>
                    <span class="text-xs font-light tracking-widest uppercase opacity-90">BeatWeave</span>
                </div>
                <iconify-icon icon="solar:hamburger-menu-linear" stroke-width="1.5" class="text-xl opacity-70"></iconify-icon>
            </div>
            <div class="text-lg font-extralight mb-3">3/4</div>
            <div class="flex gap-3 mb-6 items-center h-2">
                <div class="w-1 h-1 rounded-full bg-gray-600"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-violet-400"></div>
                <div class="w-1 h-1 rounded-full bg-gray-600"></div>
            </div>
            <div class="relative w-full flex items-center justify-center mb-8">
                <div class="absolute w-full border-t border-white/10"></div>
                <div class="z-10 bg-gray-900 px-3">
                    <iconify-icon icon="solar:settings-linear" stroke-width="1.5" class="text-lg opacity-50"></iconify-icon>
                </div>
            </div>
            <div class="flex items-center justify-between w-full px-2 mb-4">
                <button aria-label="Decrease BPM" onclick="adjustBpm('bpm2', -5)"><iconify-icon icon="solar:minus-linear" stroke-width="1.5" class="text-2xl opacity-70 cursor-pointer hover:opacity-100 transition-opacity"></iconify-icon></button>
                <div class="flex flex-col items-center border-x border-white/[0.06] px-8">
                    <span id="bpm2" class="text-6xl font-thin tracking-tight" data-value="90">90</span>
                    <span class="text-xs opacity-50 tracking-widest mt-1 font-light">BPM</span>
                </div>
                <button aria-label="Increase BPM" onclick="adjustBpm('bpm2', 5)"><iconify-icon icon="solar:add-linear" stroke-width="1.5" class="text-2xl opacity-70 cursor-pointer hover:opacity-100 transition-opacity"></iconify-icon></button>
            </div>
            <div class="relative w-64 h-64 mt-4 flex items-center justify-center">
                <canvas id="dial2" width="256" height="256" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
                <button class="w-36 h-36 rounded-full bg-gray-900 flex items-center justify-center z-10 active:scale-95 transition-transform duration-150 group border border-white/5" style="box-shadow: 12px 12px 24px #030712, -12px -12px 24px #1f2937;">
                    <span class="text-xs font-light tracking-widest opacity-50 group-active:opacity-70 transition-opacity">TAP</span>
                </button>
                <div class="absolute bottom-6 left-8 text-xs tracking-widest opacity-40 font-light">MIN</div>
                <div class="absolute bottom-6 right-8 text-xs tracking-widest opacity-40 font-light">MAX</div>
            </div>
            <div class="flex justify-between items-center w-full mt-8 pt-6 border-t border-white/[0.06] px-2">
                <button aria-label="Volume"><iconify-icon icon="solar:volume-loud-linear" stroke-width="1.5" class="text-xl opacity-70 hover:opacity-100 transition-opacity"></iconify-icon></button>
                <button aria-label="Play"><iconify-icon icon="solar:play-linear" stroke-width="1.5" class="text-2xl opacity-90 hover:opacity-100 transition-opacity"></iconify-icon></button>
                <button aria-label="Music Notes"><iconify-icon icon="solar:music-note-linear" stroke-width="1.5" class="text-xl opacity-70 hover:opacity-100 transition-opacity"></iconify-icon></button>
            </div>
        </div>
    </div>

<div class="flex-1 bg-stone-950 flex items-center justify-center p-8 min-h-screen relative overflow-hidden">
        <div class="absolute inset-0 pointer-events-none opacity-[0.03]" style="background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 24px 24px;"></div>
        <div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-[320px] border-x border-white/[0.05] pointer-events-none z-0"></div>
        <div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-[500px] border-x border-white/[0.03] pointer-events-none z-0 hidden xl:block"></div>
        <div class="absolute left-6 top-1/2 -translate-y-1/2 rotate-[-90deg] text-xs tracking-widest text-stone-500 font-light hidden lg:block">BLOOM</div>
        <div class="w-full max-w-[320px] bg-stone-900 rounded-[2.5rem] p-8 flex flex-col items-center relative z-10 border border-white/[0.06]" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);">
            <div class="flex justify-between w-full items-center mb-6 pb-6 border-b border-white/[0.06]">
                <iconify-icon icon="solar:tuning-square-linear" stroke-width="1.5" class="text-xl opacity-70"></iconify-icon>
                <div class="flex items-center gap-2">
                    <canvas id="pulse3" width="40" height="20" class="w-10 h-5"></canvas>
                    <span class="text-xs font-light tracking-widest uppercase opacity-90">BeatWeave</span>
                </div>
                <iconify-icon icon="solar:hamburger-menu-linear" stroke-width="1.5" class="text-xl opacity-70"></iconify-icon>
            </div>
            <div class="text-lg font-extralight mb-3">5/4</div>
            <div class="flex gap-3 mb-6 items-center h-2">
                <div class="w-1 h-1 rounded-full bg-stone-600"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-rose-400"></div>
                <div class="w-1 h-1 rounded-full bg-stone-600"></div>
                <div class="w-1 h-1 rounded-full bg-stone-600"></div>
                <div class="w-1 h-1 rounded-full bg-stone-600"></div>
            </div>
            <div class="relative w-full flex items-center justify-center mb-8">
                <div class="absolute w-full border-t border-white/10"></div>
                <div class="z-10 bg-stone-900 px-3">
                    <iconify-icon icon="solar:settings-linear" stroke-width="1.5" class="text-lg opacity-50"></iconify-icon>
                </div>
            </div>
            <div class="flex items-center justify-between w-full px-2 mb-4">
                <button aria-label="Decrease BPM" onclick="adjustBpm('bpm3', -5)"><iconify-icon icon="solar:minus-linear" stroke-width="1.5" class="text-2xl opacity-70 cursor-pointer hover:opacity-100 transition-opacity"></iconify-icon></button>
                <div class="flex flex-col items-center border-x border-white/[0.06] px-8">
                    <span id="bpm3" class="text-6xl font-thin tracking-tight" data-value="128">128</span>
                    <span class="text-xs opacity-50 tracking-widest mt-1 font-light">BPM</span>
                </div>
                <button aria-label="Increase BPM" onclick="adjustBpm('bpm3', 5)"><iconify-icon icon="solar:add-linear" stroke-width="1.5" class="text-2xl opacity-70 cursor-pointer hover:opacity-100 transition-opacity"></iconify-icon></button>
            </div>
            <div class="relative w-64 h-64 mt-4 flex items-center justify-center">
                <canvas id="dial3" width="256" height="256" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
                <button class="w-36 h-36 rounded-full bg-stone-900 flex items-center justify-center z-10 active:scale-95 transition-transform duration-150 group border border-white/5" style="box-shadow: 12px 12px 24px #0c0a09, -12px -12px 24px #292524;">
                    <span class="text-xs font-light tracking-widest opacity-50 group-active:opacity-70 transition-opacity">TAP</span>
                </button>
                <div class="absolute bottom-6 left-8 text-xs tracking-widest opacity-40 font-light">MIN</div>
                <div class="absolute bottom-6 right-8 text-xs tracking-widest opacity-40 font-light">MAX</div>
            </div>
            <div class="flex justify-between items-center w-full mt-8 pt-6 border-t border-white/[0.06] px-2">
                <button aria-label="Volume"><iconify-icon icon="solar:volume-loud-linear" stroke-width="1.5" class="text-xl opacity-70 hover:opacity-100 transition-opacity"></iconify-icon></button>
                <button aria-label="Play"><iconify-icon icon="solar:play-linear" stroke-width="1.5" class="text-2xl opacity-90 hover:opacity-100 transition-opacity"></iconify-icon></button>
                <button aria-label="Music Notes"><iconify-icon icon="solar:music-note-linear" stroke-width="1.5" class="text-xl opacity-70 hover:opacity-100 transition-opacity"></iconify-icon></button>
            </div>
        </div>
    </div>

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
        // BPM Ticker Animation
        const bpmTargets = {};
        const bpmCurrents = {};
        
        function initBpm(id, startVal) {
            const el = document.getElementById(id);
            bpmTargets[id] = startVal;
            bpmCurrents[id] = startVal;
            el.textContent = startVal;
            el.setAttribute('data-value', startVal);
        }
        
        function adjustBpm(id, delta) {
            const el = document.getElementById(id);
            let current = parseInt(el.getAttribute('data-value'));
            let newVal = Math.max(40, Math.min(200, current + delta));
            bpmTargets[id] = newVal;
            el.setAttribute('data-value', newVal);
        }
        
        function animateBpm() {
            for (let id in bpmTargets) {
                const target = bpmTargets[id];
                const current = bpmCurrents[id];
                if (current !== target) {
                    const diff = target - current;
                    const step = diff > 0 ? 1 : -1;
                    if (Math.abs(diff) < 1) {
                        bpmCurrents[id] = target;
                    } else {
                        bpmCurrents[id] = current + step;
                    }
                    document.getElementById(id).textContent = bpmCurrents[id];
                }
            }
            requestAnimationFrame(animateBpm);
        }
        
        initBpm('bpm1', 110);
        initBpm('bpm2', 90);
        initBpm('bpm3', 128);
        animateBpm();

        const drawPulse = (ctx, w, h, t, color) => {
            ctx.clearRect(0, 0, w, h);
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = 1.5;
            ctx.lineJoin = 'round';
            const mid = h / 2;
            ctx.moveTo(0, mid);
            for (let i = 0; i < w; i++) {
                let y = mid;
                if (i > w/2 - 8 && i < w/2 + 8) {
                    const dist = Math.abs(i - w/2);
                    const spike = Math.cos(dist * 0.4) * 8;
                    y += spike * Math.sin(t * 3);
                }
                ctx.lineTo(i, y);
            }
            ctx.stroke();
        };

        const drawDial = (ctx, w, h, color, val, t) => {
            ctx.clearRect(0, 0, w, h);
            const cx = w / 2, cy = h / 2, r = cx - 20;
            const startAngle = Math.PI * 0.75;
            const range = Math.PI * 1.5;
            const totalTicks = 60;
            for (let i = 0; i <= totalTicks; i++) {
                const angle = startAngle + (i / totalTicks) * range;
                const isLit = (i / totalTicks) < val;
                const glow = isLit ? Math.sin(t * 2 + i * 0.1) * 2 : 0;
                const innerR = r - 6 + glow;
                const x1 = cx + Math.cos(angle) * innerR;
                const y1 = cy + Math.sin(angle) * innerR;
                const x2 = cx + Math.cos(angle) * r;
                const y2 = cy + Math.sin(angle) * r;
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                if (isLit) {
                    ctx.strokeStyle = color;
                    ctx.lineWidth = 2;
                } else {
                    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
                    ctx.lineWidth = 1.5;
                }
                ctx.stroke();
            }
        };

        let time = 0;
        const animate = () => {
            time += 0.03;
            const p1 = document.getElementById('pulse1');
            drawPulse(p1.getContext('2d'), p1.width, p1.height, time, 'rgba(255,255,255,0.7)');
            const d1 = document.getElementById('dial1');
            drawDial(d1.getContext('2d'), d1.width, d1.height, '#2dd4bf', 0.3, time);

            const p2 = document.getElementById('pulse2');
            drawPulse(p2.getContext('2d'), p2.width, p2.height, time + 1, 'rgba(255,255,255,0.7)');
            const d2 = document.getElementById('dial2');
            drawDial(d2.getContext('2d'), d2.width, d2.height, '#a78bfa', 0.15, time);

            const p3 = document.getElementById('pulse3');
            drawPulse(p3.getContext('2d'), p3.width, p3.height, time + 2, 'rgba(255,255,255,0.7)');
            const d3 = document.getElementById('dial3');
            drawDial(d3.getContext('2d'), d3.width, d3.height, '#fb7185', 0.25, time);

            requestAnimationFrame(animate);
        };
        animate();
    </script>
</section>