feat: page transitions, poster hover, star bounce, reveal scale-up

spa/src/components/movie-card.tsx

@@ -44,7 +44,7 @@ export function MovieCard({ movie, rating, comment, subtitle, variant = "full",
       <Card size="sm">
         <CardContent className="flex gap-3">
           <div className="h-[84px] w-14 flex-shrink-0 overflow-hidden rounded-lg bg-muted">
-            {movie.poster_path && <img src={posterUrl(movie.poster_path)} alt="" className="size-full object-cover" />}
+            {movie.poster_path && <img src={posterUrl(movie.poster_path)} alt="" className="aero-poster-hover size-full object-cover" />}
           </div>
           <div className="min-w-0 flex-1">
             <p className="font-semibold">{movie.title}</p>

spa/src/components/reveal-card.tsx

@@ -1,6 +1,6 @@
 import { useScrollReveal } from "@/hooks/use-animate"
 
-export function RevealCard({ children }: { children: React.ReactNode }) {
+export function RevealCard({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
   const { ref, visible } = useScrollReveal()
   return (
     <div
@@ -8,7 +8,8 @@ export function RevealCard({ children }: { children: React.ReactNode }) {
       className="transition-all duration-700 ease-out"
       style={{
         opacity: visible ? 1 : 0,
-        transform: visible ? "translateY(0)" : "translateY(24px)",
+        transform: visible ? "translateY(0) scale(1)" : "translateY(24px) scale(0.97)",
+        transitionDelay: visible ? `${delay}ms` : "0ms",
       }}
     >
       {children}

spa/src/components/review-card.tsx

@@ -25,7 +25,7 @@ export function ReviewCard({ movie, review, userName, userId, isFederated, actor
     <Card size="sm">
       <CardContent className="flex gap-3">
         <Link to="/movies/$id" params={{ id: movie.id }} className="h-[84px] w-14 flex-shrink-0 overflow-hidden rounded-lg bg-muted">
-          {movie.poster_path && <img src={posterUrl(movie.poster_path)} alt="" className="size-full object-cover" />}
+          {movie.poster_path && <img src={posterUrl(movie.poster_path)} alt="" className="aero-poster-hover size-full object-cover" />}
         </Link>
         <div className="min-w-0 flex-1">
           {userName && (

spa/src/components/star-rating.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react"
 import { Star } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { hapticLight } from "@/lib/haptics"
@@ -12,25 +13,35 @@ const iconSizes = { sm: "size-5", md: "size-7", lg: "size-9" }
 const buttonSizes = { sm: "size-8", md: "size-10", lg: "size-11" }
 
 export function StarRating({ value, onChange, size = "lg" }: StarRatingProps) {
+  const [animKey, setAnimKey] = useState(0)
+
+  function handleClick(star: number) {
+    hapticLight()
+    setAnimKey((k) => k + 1)
+    onChange(star)
+  }
+
   return (
     <div className="flex gap-0.5">
       {[1, 2, 3, 4, 5].map((star) => (
         <button
           key={star}
           type="button"
-          onClick={() => { hapticLight(); onChange(star) }}
+          onClick={() => handleClick(star)}
           className={cn(
             "flex items-center justify-center rounded-md transition-transform active:scale-90",
             buttonSizes[size],
           )}
         >
           <Star
+            key={`${star}-${animKey}`}
             className={cn(
               iconSizes[size],
               star <= value
-                ? "fill-amber-500 text-amber-500 aero-star-filled"
+                ? "fill-amber-500 text-amber-500 aero-star-filled aero-star-pop"
                 : "text-muted-foreground/30",
             )}
+            style={star <= value ? { animationDelay: `${(star - 1) * 50}ms` } : undefined}
           />
         </button>
       ))}