import React, { useState, useRef, useEffect } from "react"; import * as Tone from "tone"; import anime from "animejs"; const GRID_ROWS = 8; const GRID_COLS = 16; // Palette: Each color is a different sound (percussion/melody) const INSTRUMENTS = [ { name: "Kick", color: "#22d3ee", // neon cyan synth: () => { const s = new Tone.MembraneSynth().toDestination(); s.triggerAttackRelease("C1", "8n"); }, }, { name: "Snare", color: "#a78bfa", // violet synth: () => { const s = new Tone.NoiseSynth({ envelope: { sustain: 0.02 } }).toDestination(); s.triggerAttackRelease("8n"); }, }, { name: "Hi-Hat", color: "#f472b6", // pink synth: () => { const s = new Tone.MetalSynth({ frequency: 250, envelope: { attack: 0.001, decay: 0.05, release: 0.01 } }).toDestination(); s.triggerAttackRelease("C4", "16n"); }, }, { name: "Synth", color: "#94fa45", // green synth: (row) => { // Map row to scale (simple major scale up) const scale = ["C4","D4","E4","G4","A4","C5","D5","E5"]; const note = scale[row % scale.length]; const s = new Tone.Synth({ oscillator: { type: "triangle" }, envelope: { attack: 0.01, decay: 0.08, sustain: 0.1, release: 0.15 } }).toDestination(); s.triggerAttackRelease(note, "8n"); }, }, { name: "Bass", color: "#feb72b", // orange synth: (row) => { // Lower octave const scale = ["C2","D2","E2","G2","A2","C3","D3","E3"]; const note = scale[row % scale.length]; const s = new Tone.Synth({ oscillator: { type: "sawtooth" }, envelope: { attack: 0.01, decay: 0.12, sustain: 0.2, release: 0.18 } }).toDestination(); s.triggerAttackRelease(note, "8n"); }, } ]; const EMPTY_TILE = null; // Helper: Simple hash for instrument-color lookup const colorToInstrumentIndex = color => INSTRUMENTS.findIndex(i => i.color === color); // Storage for persistent pattern const STORAGE_KEY = "pixel_groove_pattern"; export default function App() { const [pattern, setPattern] = useSharedStorage( STORAGE_KEY, Array(GRID_ROWS).fill(0).map(() => Array(GRID_COLS).fill(EMPTY_TILE)) ); // [[null or { color }]] const [currentColor, setCurrentColor] = useState(INSTRUMENTS[0].color); const [isPlaying, setIsPlaying] = useState(false); const [bpm, setBpm] = useAppStorage("pgl_bpm", 110); const [currentStep, setCurrentStep] = useState(-1); const [dragTile, setDragTile] = useState(null); // { row, col, color } const animatingGridRef = useRef([]); // refs to animate const playLoopId = useRef(null); const gridRootRef = useRef(null); // --- Grid handlers --- const handleTileTap = (row, col, e) => { if (pattern[row][col] && pattern[row][col].color === currentColor) { // Erase updatePattern(row, col, EMPTY_TILE); } else { // Place/paint updatePattern(row, col, { color: currentColor }); } }; function updatePattern(row, col, tile) { setPattern(prev => { const next = prev.map(xs => xs.slice()); next[row][col] = tile; return next; }); } // ---- Drag-and-drop tile movement (mouse/touch) --- const onTileDragStart = (row, col, e) => { e.preventDefault(); setDragTile({ row, col, color: pattern[row][col].color }); }; const onGridPointerMove = (e) => { if (!dragTile) return; const rect = gridRootRef.current.getBoundingClientRect(); let x, y; if (e.touches && e.touches.length > 0) { x = e.touches[0].clientX; y = e.touches[0].clientY; } else { x = e.clientX; y = e.clientY; } const relX = x - rect.left; const relY = y - rect.top; const col = Math.floor(relX / (rect.width / GRID_COLS)); const row = Math.floor(relY / (rect.height / GRID_ROWS)); if ( row >= 0 && row < GRID_ROWS && col >= 0 && col < GRID_COLS && (pattern[row][col] === EMPTY_TILE) ) { // Move tile visually under pointer setPattern(prev => { const next = prev.map(xs => xs.slice()); next[dragTile.row][dragTile.col] = EMPTY_TILE; next[row][col] = { color: dragTile.color }; return next; }); setDragTile({ row, col, color: dragTile.color }); } }; const onGridPointerUp = () => { setDragTile(null); }; // -- Play logic -- useEffect(() => { if (!isPlaying) { setCurrentStep(-1); Tone.Transport.stop(); Tone.Transport.cancel(0); return; } // User may need to interact for Tone.start() async function startAudio() { await Tone.start(); Tone.Transport.bpm.value = bpm; const loop = new Tone.Sequence( (time, step) => { setCurrentStep(step); // Play all active tiles in this step/column for (let row = 0; row < GRID_ROWS; row++) { const t = pattern[row][step]; if (t !== EMPTY_TILE) { const instIndex = colorToInstrumentIndex(t.color); if (instIndex >= 0) { // Melody instr get row for pitch INSTRUMENTS[instIndex].synth(row); } triggerPulseAnim(row, step, t.color); } } }, [...Array(GRID_COLS).keys()], // steps sequence "16n" ); Tone.Transport.scheduleRepeat(() => {}, "1m"); // prevent auto-stop loop.start(0); Tone.Transport.start(); playLoopId.current = loop; } startAudio(); return () => { Tone.Transport.stop(); Tone.Transport.cancel(0); if (playLoopId.current) playLoopId.current.dispose(); playLoopId.current = null; }; // eslint-disable-next-line }, [isPlaying, bpm, pattern]); // Pulse animation per step const triggerPulseAnim = (row, col, color) => { if (!animatingGridRef.current) return; const el = animatingGridRef.current[row]?.[col]; if (!el) return; anime({ targets: el, scale: [1.15, 1], backgroundColor: [color, "#fff0"], duration: 220, easing: "easeOutCubic" }); }; // BPM slider const bpmMarks = [80, 100, 120, 140]; // Keyboard : 1–5 sets color, space play/stop useEffect(() => { const handler = (e) => { if (e.key === " ") { setIsPlaying(v => !v); } else if (/^[1-5]$/.test(e.key)) { setCurrentColor(INSTRUMENTS[Number(e.key) - 1].color); } }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []); // Animated visualizer background (pixel pulse) const [bgPulse, setBgPulse] = useState(0); useEffect(() => { if (currentStep === -1 || !isPlaying) return; setBgPulse(v => (v + 1) % 12); }, [currentStep, isPlaying]); // Helpers const handleClear = () => { setPattern(Array(GRID_ROWS).fill(0).map(() => Array(GRID_COLS).fill(EMPTY_TILE))); setCurrentStep(-1); }; // Visualizer pixels (vibe grid) generator const renderPulsePixels = () => { const pulses = []; for (let py = 0; py < 6; py++) { for (let px = 0; px < 16; px++) { const color = [ "#0f172a", // almost black "#0e2c3f", "#0a4870", "#0960a6", "#0dc0c0", "#a78bfa", "#fb70b6", "#fbe6fa", ][(py + px + bgPulse) % 8]; pulses.push(

); } } return

{pulses}

; }; // --- Rendering --- return (

{/* Animated pixel visualizer backdrop */} {renderPulsePixels()}

🎹 Pixel Groove Studio

Compose looping beats and melodies by painting colored tiles. Each color = a sound! Drag to move, tap again to erase.

{/* Color palette */}

{INSTRUMENTS.map((inst, i) => ( ))}

{/* BPM & controls */}

Tempo setBpm(Number(e.target.value))} className="accent-[var(--ds-primary)] h-2 w-[80px]" aria-label="bpm slider" /> {bpm}

{/* Grid */}

{pattern.map((rowArr, rowIdx) => rowArr.map((tile, colIdx) => (

{ animatingGridRef.current[rowIdx] = animatingGridRef.current[rowIdx] || []; animatingGridRef.current[rowIdx][colIdx] = el; }} className={`w-full h-full aspect-square flex items-center justify-center select-none cursor-pointer border hover:border-[var(--ds-primary)] bg-gradient-to-br transition-all border-transparent ${tile ? "shadow-md" : "bg-white/10 hover:bg-[var(--ds-primary)]/20"} ${currentStep === colIdx ? "ring-2 ring-[var(--ds-accent)] shadow-xl" : ""}`} style={{ borderRadius: 'var(--ds-radius)', backgroundColor: tile ? tile.color : undefined, boxShadow: colIdx === currentStep && tile ? `0 0 0 4px ${tile.color}66` : undefined, opacity: (tile || currentStep === colIdx) ? 1 : 0.85, position: 'relative', transition: 'background 0.1s, box-shadow 0.2s', }} onClick={e => handleTileTap(rowIdx, colIdx, e)} tabIndex={0} onPointerDown={tile ? (e) => onTileDragStart(rowIdx, colIdx, e) : undefined} onTouchStart={tile ? (e) => onTileDragStart(rowIdx, colIdx, e) : undefined} > {tile && {INSTRUMENTS[colorToInstrumentIndex(tile.color)]?.name[0]}}

)) )}

{/* Instrument legend */}

{INSTRUMENTS.map((inst, i) => ( {inst.name} [{i+1}] ))}

Pro tips: Spacebar = Play/Stop • 1-5 = Select color • Tap to paint/erase • Drag to move notes

); }