diff --git a/frontend/src/components/MaestroButton.tsx b/frontend/src/components/MaestroButton.tsx index f0141ff..51307f2 100644 --- a/frontend/src/components/MaestroButton.tsx +++ b/frontend/src/components/MaestroButton.tsx @@ -19,6 +19,30 @@ interface Props { onStructuredResult?: (fields: PromptStructure, mode: 'generate' | 'complete') => void } +function BouncingNote() { + return ( + + ) +} + export default function MaestroButton({ prompt, onResult, @@ -75,26 +99,26 @@ export default function MaestroButton({ type="button" onClick={handleMaestro} disabled={isMaestroing} - className={`${className} flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md min-w-[140px] border transition-colors duration-200 ${ + className={`${className} flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md min-w-[140px] border border-kithara-accent/30 transition-colors duration-200 ${ isMaestroing - ? 'bg-kithara-accent/20 border-kithara-accent/30 text-kithara-accent animate-pulse' - : 'bg-kithara-accent/10 border-kithara-accent/30 hover:bg-kithara-accent/25 hover:border-kithara-accent/50 text-kithara-accent' + ? 'bg-kithara-accent/20 text-kithara-accent' + : 'bg-kithara-accent/10 text-kithara-accent hover:bg-kithara-accent/25 hover:border-kithara-accent/50' }`} title={mode === 'generate' ? "Let Maestro write a creative prompt for you" : "Let Maestro complete your prompt with musical details" } > - {isMaestroing ? ( - <> - ♩ - - {mode === 'generate' ? 'Dreaming...' : 'Composing...'} - - - ) : ( - {label} - )} + {isMaestroing ? ( + <> + + + {mode === 'generate' ? 'Dreaming...' : 'Composing...'} + + + ) : ( + {label} + )} ) } \ No newline at end of file diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 39b34c0..9f5e119 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -19,9 +19,14 @@ export default { '0%': { transform: 'translateX(0)' }, '100%': { transform: 'translateX(-50%)' }, }, + 'note-bounce': { + '0%, 100%': { transform: 'translateY(0)' }, + '50%': { transform: 'translateY(-3px)' }, + }, }, animation: { 'marquee': 'marquee-scroll linear infinite', + 'note-bounce': 'note-bounce 0.6s ease-in-out infinite', }, }, },