feat: style and animation tweaks

Author: arianrhodsandlot

package.json

@@ -57,6 +57,7 @@
     "react-dom": "19.0.0",
     "swr": "2.3.3",
     "tailwind-merge": "3.0.2",
+    "tailwindcss-motion": "1.1.0",
     "waku": "0.21.23",
     "zod": "3.24.2"
   },

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import { type ReactNode, type UIEventHandler, useMemo } from 'react'
-import { getContextData } from 'waku/middleware/context'
+import { getContext, getContextData } from 'waku/middleware/context'
 import { ScrollArea } from '@/pages/components/radix-themes.ts'
 import { ServerDataContextProvider } from './server-data-context-provider.tsx'
 import { SidebarLinks } from './sidebar-links.tsx'
@@ -21,6 +21,7 @@ export default function AppLayout({
   serverData,
   sidebar = defaultSidebar,
 }: AppLayoutProps) {
+  const { req } = getContext()
   const { preference } = getContextData()
   const value = useMemo(() => ({ preference, ...serverData }), [preference, serverData])
 
@@ -39,7 +40,7 @@ export default function AppLayout({
 
         <div className='flex h-full flex-1'>
           <div className='relative my-4 mr-4 flex flex-1 overflow-hidden rounded bg-zinc-50 shadow-[0_0_12px] shadow-black/10'>
-            <MainScrollArea className='z-1 relative flex-1 p-4' size='2'>
+            <MainScrollArea className='z-1 relative flex-1 p-4' key={req.url.pathname} size='2'>
               <main className='min-h-full'>{children}</main>
             </MainScrollArea>
             {append}

src/pages/library/components/app-layout.tsx

@@ -50,10 +50,11 @@ export async function DeviceInfo({ platform }: { platform: string }) {
           {platformInfo.notes}
         </div>
       </div>
+
       <div className='w-lg shrink-0'>
         <img
           alt={platformInfo.name}
-          className='h-auto w-full drop-shadow-2xl'
+          className='motion-preset-oscillate motion-duration-2400 h-auto w-full drop-shadow-2xl [--motion-loop-translate-y:8px]'
           src={getCDNUrl('Mattersons/es-theme-neutral', `systems/device/${platform}.png`)}
         />
       </div>

src/pages/library/components/device-info.tsx

@@ -9,6 +9,7 @@ export function SidebarLink({ active = false, children, href }) {
           'mx-2 flex items-center gap-2 rounded px-4 py-2.5 font-semibold  transition-colors  hover:text-white',
           active ? 'cursor-default bg-rose-900 font-semibold text-white' : 'text-white/80 ',
         )}
+        scroll
         to={href}
         unstable_pending={<div className='z-1 absolute top-0 size-full' />}
       >

src/pages/library/components/sidebar-link.tsx

@@ -34,7 +34,7 @@ export function GameOverlay() {
         {show ? (
           <motion.div
             animate={{ opacity: 1, scale: 1 }}
-            className='bg-linear-to-b backdrop-blur-xs pointer-events-auto absolute inset-0 z-10 flex h-screen w-screen flex-col bg-black/50 text-white'
+            className='bg-linear-to-b pointer-events-auto absolute inset-0 z-10 flex h-screen w-screen flex-col bg-black/70 text-white'
             exit={{ opacity: 0, scale: 1.1 }}
             initial={{ opacity: 0, scale: 1.1 }}
             transition={{ duration: 0.2 }}

src/pages/library/platform/rom/components/game-overlay/game-overlay.tsx

@@ -23,14 +23,20 @@ export function LaunchButton() {
   return (
     <button
       className={clsx(
-        'inline-flex h-16 w-72 items-center justify-center gap-1.5 rounded bg-[var(--theme)] text-xl font-bold text-white',
+        'inline-flex h-16 w-72 items-center justify-center gap-3 rounded bg-[var(--theme)] text-xl font-bold text-white',
         { 'opacity-50': isPreparing },
       )}
       disabled={isPreparing}
       onClick={launch}
       type='button'
     >
-      <span className={isPreparing ? 'icon-[mdi--loading] animate-spin' : 'icon-[mdi--play]'} />
+      <span
+        className={
+          isPreparing
+            ? 'icon-[mdi--loading] animate-spin'
+            : 'icon-[mdi--play] motion-preset-pulse-lg motion-duration-1000'
+        }
+      />
       {isPreparing ? 'Loading...' : 'Press any key to start'}
     </button>
   )

src/pages/library/platform/rom/components/launch-button.tsx

@@ -1,6 +1,7 @@
 @import 'tailwindcss';
 @plugin "@iconify/tailwind4";
 @plugin "@tailwindcss/typography";
+@plugin "tailwindcss-motion";
 
 body {
   -moz-osx-font-smoothing: grayscale;