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>
   );

components/kiosk/ticker.tsx

@@ -12,9 +12,10 @@ interface TickerActivity {
 
 interface TickerProps {
   activities: TickerActivity[];
+  speed: number;
 }
 
-export function Ticker({ activities }: TickerProps) {
+export function Ticker({ activities, speed }: TickerProps) {
   const tickerRef = useRef<HTMLDivElement>(null);
   const [isPaused, setIsPaused] = useState(false);
 
@@ -34,7 +35,15 @@ export function Ticker({ activities }: TickerProps) {
     <div className="fixed bottom-0 left-0 right-0 bg-black border-t-4 border-blue-600 h-24 overflow-hidden">
       <div
         ref={tickerRef}
-        className={`flex items-center h-full whitespace-nowrap ${isPaused ? '' : 'animate-ticker'}`}
+        className="flex items-center h-full whitespace-nowrap"
+        style={{
+          animation: isPaused ? 'none' : `ticker ${speed}s linear infinite`,
+          willChange: 'transform',
+          backfaceVisibility: 'hidden',
+          transform: 'translate3d(0, 0, 0)',
+          WebkitFontSmoothing: 'antialiased',
+          MozOsxFontSmoothing: 'grayscale',
+        }}
         onMouseEnter={() => setIsPaused(true)}
         onMouseLeave={() => setIsPaused(false)}
       >