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',
},
},
},