polish: unit labels in parentheses, export panel styling, remove unused gradient utilities

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/globals.css

@@ -153,32 +153,4 @@ html {
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--border);
-}
+}
-
-@utility gradient-purple-blue {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-@utility gradient-cyan-purple {
-  background: linear-gradient(135deg, #2dd4bf 0%, #8b5cf6 100%);
-}
-
-@utility gradient-indigo-purple {
-  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
-}
-
-@utility gradient-yellow-amber {
-  background: linear-gradient(135deg, #eab308 0%, #f59e0b 100%);
-}
-
-@utility gradient-green-teal {
-  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
-}
-
-@utility gradient-blue-cyan {
-  background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
-}
-
-@utility gradient-brand {
-  background: linear-gradient(to right, #a78bfa, #f472b6, #22d3ee);
-}

components/animate/AnimationSettings.tsx

@@ -81,7 +81,7 @@ export function AnimationSettings({ config, onChange }: Props) {
                 step={50}
                 value={config.duration}
                 onChange={(e) => set('duration', Math.max(50, Number(e.target.value)))}
-                className="text-xs"
+               
               />
               <span className="text-xs text-muted-foreground shrink-0">ms</span>
             </div>
@@ -96,7 +96,7 @@ export function AnimationSettings({ config, onChange }: Props) {
                 step={50}
                 value={config.delay}
                 onChange={(e) => set('delay', Math.max(0, Number(e.target.value)))}
-                className="text-xs"
+               
               />
               <span className="text-xs text-muted-foreground shrink-0">ms</span>
             </div>
@@ -116,12 +116,12 @@ export function AnimationSettings({ config, onChange }: Props) {
               }
             }}
           >
-            <SelectTrigger className="text-xs">
+            <SelectTrigger className="w-full">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
               {EASINGS.map((e) => (
-                <SelectItem key={e.value} value={e.value} className="text-xs">
+                <SelectItem key={e.value} value={e.value}>
                   {e.label}
                 </SelectItem>
               ))}
@@ -183,14 +183,14 @@ export function AnimationSettings({ config, onChange }: Props) {
         <div className="space-y-1.5">
           <Label className="text-xs">Direction</Label>
           <Select value={config.direction} onValueChange={(v) => set('direction', v as AnimationConfig['direction'])}>
-            <SelectTrigger className="text-xs">
+            <SelectTrigger className="w-full">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="normal" className="text-xs">Normal</SelectItem>
+              <SelectItem value="normal">Normal</SelectItem>
-              <SelectItem value="reverse" className="text-xs">Reverse</SelectItem>
+              <SelectItem value="reverse">Reverse</SelectItem>
-              <SelectItem value="alternate" className="text-xs">Alternate</SelectItem>
+              <SelectItem value="alternate">Alternate</SelectItem>
-              <SelectItem value="alternate-reverse" className="text-xs">Alternate Reverse</SelectItem>
+              <SelectItem value="alternate-reverse">Alternate Reverse</SelectItem>
             </SelectContent>
           </Select>
         </div>
@@ -199,14 +199,14 @@ export function AnimationSettings({ config, onChange }: Props) {
         <div className="space-y-1.5">
           <Label className="text-xs">Fill Mode</Label>
           <Select value={config.fillMode} onValueChange={(v) => set('fillMode', v as AnimationConfig['fillMode'])}>
-            <SelectTrigger className="text-xs">
+            <SelectTrigger className="w-full">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="none" className="text-xs">None</SelectItem>
+              <SelectItem value="none">None</SelectItem>
-              <SelectItem value="forwards" className="text-xs">Forwards</SelectItem>
+              <SelectItem value="forwards">Forwards</SelectItem>
-              <SelectItem value="backwards" className="text-xs">Backwards</SelectItem>
+              <SelectItem value="backwards">Backwards</SelectItem>
-              <SelectItem value="both" className="text-xs">Both</SelectItem>
+              <SelectItem value="both">Both</SelectItem>
             </SelectContent>
           </Select>
         </div>

components/animate/ExportPanel.tsx

@@ -33,16 +33,16 @@ function CodeBlock({ code, filename }: { code: string; filename: string }) {
   return (
     <div className="space-y-3">
       <div className="relative">
-        <pre className="p-4 rounded-xl bg-muted/30 border border-border text-xs font-mono leading-relaxed overflow-auto max-h-72 text-foreground/90 whitespace-pre">
+        <pre className="p-4 rounded-xl bg-muted/30 border border-border text-xs font-mono leading-relaxed overflow-auto max-h-72 text-foreground/90 whitespace-pre scrollbar">
           <code>{code}</code>
         </pre>
       </div>
-      <div className="flex gap-2">
+      <div className="flex flex-col md:flex-row gap-3">
-        <Button size="sm" variant="outline" onClick={copy} className="flex-1">
+        <Button variant="outline" onClick={copy} className="w-full md:flex-1">
           <Copy className="h-3.5 w-3.5 mr-1.5" />
           Copy
         </Button>
-        <Button size="sm" variant="outline" onClick={download} className="flex-1">
+        <Button onClick={download} className="w-full md:flex-1">
           <Download className="h-3.5 w-3.5 mr-1.5" />
           Download .css
         </Button>

components/animate/KeyframeProperties.tsx

@@ -30,7 +30,7 @@ function SliderRow({ label, unit, value, min, max, step = 1, onChange }: SliderR
     <div className="grid grid-cols-[1fr_auto] gap-x-3 items-center">
       <div className="space-y-1">
         <Label className="text-[10px] text-muted-foreground">
-          {label}{unit && <span className="text-muted-foreground/50 ml-0.5">{unit}</span>}
+          {label}{unit && <span className="text-muted-foreground/50"> ({unit})</span>}
         </Label>
         <Slider
           min={min}