forked from averyfelts/Lofi_Generator
5ed84192d5
- Set up Next.js project with shadcn/ui and Tailwind CSS - Created audio engine with MembraneSynth drums, FMSynth chords, and ambient noise layers - Implemented 16-step drum sequencer with boom bap patterns - Added jazz chord progressions (ii-V-I, minor key, neo soul) - Built React hook for audio state management - Created UI components: transport controls, volume sliders, layer mixer, beat visualizer - Applied lofi-themed dark color scheme with oklch colors Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
36 lines
890 B
TypeScript
36 lines
890 B
TypeScript
'use client';
|
|
|
|
interface VisualizerProps {
|
|
currentStep: number;
|
|
isPlaying: boolean;
|
|
}
|
|
|
|
export function Visualizer({ currentStep, isPlaying }: VisualizerProps) {
|
|
return (
|
|
<div className="flex items-center justify-center gap-1.5 py-4">
|
|
{Array.from({ length: 16 }, (_, i) => {
|
|
const isActive = isPlaying && currentStep === i;
|
|
const isBeat = i % 4 === 0;
|
|
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={`
|
|
transition-all duration-75
|
|
${isBeat ? 'w-3 h-8' : 'w-2 h-6'}
|
|
rounded-full
|
|
${
|
|
isActive
|
|
? 'bg-primary scale-110 shadow-lg shadow-primary/50'
|
|
: isBeat
|
|
? 'bg-muted-foreground/40'
|
|
: 'bg-muted-foreground/20'
|
|
}
|
|
`}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|