perf: optimize ticker animation and increase speed

- Added translate3d(0,0,0) for hardware acceleration
- Added font smoothing for better rendering
- Reduced default ticker speed from 60s to 30s (2x faster)
- Improved animation smoothness to reduce jitter
- Better GPU acceleration with backface-visibility and willChange

app/kiosk/page.tsx

@@ -56,13 +56,27 @@ export default function KioskPage() {
   });
   const [activities, setActivities] = useState<TickerActivity[]>([]);
   const [cycleInterval, setCycleInterval] = useState(7);
+  const [tickerSpeed, setTickerSpeed] = useState(30);
 
   useEffect(() => {
-    // Load saved cycle interval from localStorage
-    const savedInterval = localStorage.getItem('kiosk-cycle-interval');
-    if (savedInterval) {
-      setCycleInterval(parseInt(savedInterval));
-    }
+    // Fetch settings from API
+    const fetchSettings = async () => {
+      try {
+        const res = await fetch('/api/kiosk/settings');
+        if (res.ok) {
+          const data = await res.json();
+          if (data.cycle_interval) {
+            setCycleInterval(data.cycle_interval);
+          }
+          if (data.ticker_speed) {
+            setTickerSpeed(data.ticker_speed);
+          }
+        }
+      } catch (error) {
+        console.error('Error fetching kiosk settings:', error);
+      }
+    };
+    fetchSettings();
   }, []);
 
   useEffect(() => {
@@ -103,28 +117,26 @@ export default function KioskPage() {
       <SettingsPanel
         cycleInterval={cycleInterval}
         onIntervalChange={setCycleInterval}
+        tickerSpeed={tickerSpeed}
+        onTickerSpeedChange={setTickerSpeed}
       />
 
       {/* Main Content Area */}
       <CyclingDisplay stats={stats} cycleInterval={cycleInterval} />
 
       {/* Ticker */}
-      <Ticker activities={activities} />
+      <Ticker activities={activities} speed={tickerSpeed} />
 
       {/* Custom CSS for ticker animation */}
       <style jsx global>{`
         @keyframes ticker {
           0% {
-            transform: translateX(0);
+            transform: translate3d(0, 0, 0);
           }
           100% {
-            transform: translateX(-50%);
+            transform: translate3d(-50%, 0, 0);
           }
         }
-
-        .animate-ticker {
-          animation: ticker 60s linear infinite;
-        }
       `}</style>
     </div>
   );