0f17775f3f
- Add 4 genres: Hip Hop, Classical, Trap, Pop with unique patterns - Add new instrument layers: Bass, Brass, Piano - Each layer now has 4 instrument variations to choose from - Add genre-specific drum patterns, chord progressions, and melodies - Add duration control (1-10 minutes) - Rename app to "Beat Generator" with modern gradient header - Redesign UI with 2-column instrument grid layout - Add color-coded accent for each instrument section Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
interface VisualizerProps {
|
|
currentStep: number;
|
|
isPlaying: boolean;
|
|
}
|
|
|
|
export function Visualizer({ currentStep, isPlaying }: VisualizerProps) {
|
|
return (
|
|
<div className="flex items-end justify-center gap-1 h-16 px-4 py-3 bg-secondary/50 rounded-lg border border-border/50">
|
|
{Array.from({ length: 16 }, (_, i) => {
|
|
const isActive = isPlaying && currentStep === i;
|
|
const isBeat = i % 4 === 0;
|
|
const isOffbeat = i % 2 === 1;
|
|
|
|
// Vary heights for visual interest
|
|
const baseHeight = isBeat ? 'h-12' : isOffbeat ? 'h-6' : 'h-8';
|
|
const activeHeight = 'h-14';
|
|
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={`
|
|
transition-all duration-50 ease-out
|
|
${isBeat ? 'w-4' : 'w-2.5'}
|
|
${isActive ? activeHeight : baseHeight}
|
|
${
|
|
isActive
|
|
? 'bg-gradient-to-t from-lofi-orange via-lofi-pink to-lofi-purple shadow-[0_0_12px_rgba(255,150,100,0.6)]'
|
|
: isBeat
|
|
? 'bg-gradient-to-t from-lofi-orange/60 to-lofi-orange/30'
|
|
: 'bg-muted-foreground/30'
|
|
}
|
|
${isBeat ? 'rounded-sm' : 'rounded-[2px]'}
|
|
`}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|