Analyze website for UI and animation inconsistencies

app/contribute/contribute-view.tsx

@@ -5,6 +5,7 @@ import { ContributeHero } from "@/components/contribute/contribute-hero";
 import { ContributionCard } from "@/components/contribute/contribution-card";
 import { ContributionEmptyState } from "@/components/contribute/contribution-empty-state";
 import { ContributionHint } from "@/components/contribute/contribution-hint";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
 
 const containerVariants = {
   hidden: { opacity: 0 },
@@ -27,6 +28,8 @@ export interface ContributionCardData {
 }
 
 export default function ContributeView({ cards }: { cards: ContributionCardData[] }) {
+  const prefersReducedMotion = useReducedMotion();
+
   return (
     <div className="relative z-10 min-h-screen overflow-hidden bg-gray-50 pt-28 md:pt-32 dark:bg-[#0a0a0a]">
       {/* Background decoration */}
@@ -40,10 +43,10 @@ export default function ContributeView({ cards }: { cards: ContributionCardData[
       <div className="relative z-10 mx-auto max-w-[90rem] px-4 pb-24 sm:px-6 lg:px-8">
         {cards.length > 0 ? (
           <m.div
-            animate="visible"
+            animate={prefersReducedMotion ? undefined : "visible"}
             className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
-            initial="hidden"
-            variants={containerVariants}
+            initial={prefersReducedMotion ? false : "hidden"}
+            variants={prefersReducedMotion ? undefined : containerVariants}
           >
             {cards.map((card, index) => (
               <ContributionCard

app/projects/eternalcombat/page.tsx

@@ -263,11 +263,11 @@ export default function EternalCombatPage() {
                 {/* The "Long Screenshot" Container */}
                 <div className="relative h-[600px] w-full transform-gpu select-none overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl transition-transform duration-700 will-change-transform hover:scale-[1.02] dark:border-gray-800 dark:bg-[#0d1117]">
                   {/* Tilted Content */}
-                  <div className="absolute -top-10 -left-[15%] h-[200%] w-[150%] origin-top-left rotate-2 transform-gpu transition-all duration-700 will-change-transform hover:rotate-0 hover:scale-100">
+                  <div className="absolute -top-10 -left-[15%] h-[200%] w-[150%] origin-top-left rotate-2 transform-gpu transition-transform duration-700 will-change-transform hover:rotate-0 hover:scale-100">
                     {/* Inner blur container */}
-                    <div className="h-full pl-24 opacity-90 blur-[0.5px] filter transition-all duration-700 group-hover:opacity-100 group-hover:blur-0">
+                    <div className="h-full pl-24 opacity-90 blur-[0.5px] filter transition-[opacity,filter] duration-700 group-hover:opacity-100 group-hover:blur-0">
                       {/* Auto-scrolling animation container */}
-                      <div className="animate-scroll-y">
+                      <div className="animate-scroll-y motion-reduce:animate-none">
                         <ConfigPreview />
                         {/* Duplicate content for seamless loop */}
                         <ConfigPreview />
@@ -290,6 +290,11 @@ export default function EternalCombatPage() {
                                         .animate-scroll-y:hover {
                                             animation-play-state: paused;
                                         }
+                                        @media (prefers-reduced-motion: reduce) {
+                                            .animate-scroll-y {
+                                                animation: none;
+                                            }
+                                        }
                                     `}</style>
                 </div>
               </div>

app/projects/eternalcore/eternal-showcase.tsx

@@ -6,6 +6,7 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { FadeIn } from "@/components/ui/motion/motion-components";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
 
 const marqueeItems = [
   // Row 1: Essentials & Chat
@@ -124,30 +125,41 @@ const InfiniteMarquee = ({
   speed?: number;
   onItemClick: (item: (typeof marqueeItems)[0]) => void;
 }) => {
+  const prefersReducedMotion = useReducedMotion();
+  let marqueeX: "0%" | ["0%", "-50%"] | ["-50%", "0%"];
+
+  if (prefersReducedMotion) {
+    marqueeX = "0%";
+  } else if (direction === "left") {
+    marqueeX = ["0%", "-50%"];
+  } else {
+    marqueeX = ["-50%", "0%"];
+  }
+
   return (
     <div className="relative flex w-full overflow-hidden">
       <motion.div
         animate={{
-          x: direction === "left" ? ["0%", "-50%"] : ["-50%", "0%"],
+          x: marqueeX,
         }}
         className="flex gap-4 py-4"
         style={{
           width: "max-content",
         }}
         transition={{
-          duration: speed,
+          duration: prefersReducedMotion ? 0 : speed,
           ease: "linear",
-          repeat: Number.POSITIVE_INFINITY,
+          repeat: prefersReducedMotion ? 0 : Number.POSITIVE_INFINITY,
           repeatType: "loop",
         }}
       >
         {[...items, ...items].map((item, i) => (
           <motion.div
-            className="group relative aspect-video w-[400px] shrink-0 transform-gpu cursor-pointer overflow-hidden rounded-xl border border-gray-200 bg-gray-100 shadow-sm transition-all will-change-transform hover:border-[#9d6eef]/50 hover:shadow-[#9d6eef]/20 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900"
+            className="group relative aspect-video w-[400px] shrink-0 transform-gpu cursor-pointer overflow-hidden rounded-xl border border-gray-200 bg-gray-100 shadow-sm transition-[border-color,box-shadow,background-color,transform] will-change-transform hover:border-[#9d6eef]/50 hover:shadow-[#9d6eef]/20 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900"
             key={`${item.id}-${i}`}
             onClick={() => onItemClick(item)}
-            whileHover={{ scale: 1.02 }}
-            whileTap={{ scale: 0.98 }}
+            whileHover={prefersReducedMotion ? undefined : { scale: 1.02 }}
+            whileTap={prefersReducedMotion ? undefined : { scale: 0.98 }}
           >
             <Image
               alt={item.id}
@@ -159,7 +171,7 @@ const InfiniteMarquee = ({
             />
 
             {/* Gradient Overlay & Content - Always visible on hover */}
-            <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/90 via-black/20 to-transparent p-6 opacity-0 transition-all duration-300 group-hover:opacity-100">
+            <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/90 via-black/20 to-transparent p-6 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
               <div className="translate-y-4 transform-gpu transition-transform duration-300 will-change-transform group-hover:translate-y-0">
                 <div className="flex items-center justify-between">
                   <div>

app/projects/eternalcore/page.tsx

@@ -8,13 +8,15 @@ import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { FacadePattern } from "@/components/ui/facade-pattern";
 import { FadeIn, MotionSection, ScaleIn, SlideIn } from "@/components/ui/motion/motion-components";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
 import { slideUp } from "@/lib/animations/variants";
 
 import { ConfigPreview } from "./config-preview";
 import { EternalShowcase } from "./eternal-showcase";
 
 export default function EternalCorePage() {
   const targetRef = useRef(null);
+  const prefersReducedMotion = useReducedMotion();
   const { scrollYProgress } = useScroll({
     target: targetRef,
     offset: ["start start", "end start"],
@@ -160,8 +162,12 @@ export default function EternalCorePage() {
                 gradient: "from-blue-500/20 to-cyan-500/20",
               },
             ].map((feature) => (
-              <m.div className="h-full" key={feature.title} variants={slideUp}>
-                <Card className="group relative flex h-full transform-gpu flex-col p-6 transition-all will-change-transform hover:-translate-y-1 hover:bg-gray-50 hover:shadow-lg dark:hover:bg-gray-800/60">
+              <m.div
+                className="h-full"
+                key={feature.title}
+                variants={prefersReducedMotion ? undefined : slideUp}
+              >
+                <Card className="group relative flex h-full transform-gpu flex-col p-6 transition-[transform,box-shadow,background-color] will-change-transform hover:-translate-y-1 hover:bg-gray-50 hover:shadow-lg dark:hover:bg-gray-800/60">
                   <div
                     className={`absolute inset-0 bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 ${feature.gradient} pointer-events-none`}
                   />
@@ -242,9 +248,9 @@ export default function EternalCorePage() {
                   {/* Content Container (Standard, non-tilted) */}
                   <div className="absolute inset-0 h-full w-full overflow-hidden pt-12">
                     {/* Inner blur container */}
-                    <div className="h-full opacity-90 blur-[0.5px] filter transition-all duration-700 group-hover:opacity-100 group-hover:blur-0">
+                    <div className="h-full opacity-90 blur-[0.5px] filter transition-[opacity,filter] duration-700 group-hover:opacity-100 group-hover:blur-0">
                       {/* Auto-scrolling animation container */}
-                      <div className="animate-scroll-y">
+                      <div className="animate-scroll-y motion-reduce:animate-none">
                         <ConfigPreview />
                         {/* Duplicate content for seamless loop */}
                         <ConfigPreview />
@@ -267,6 +273,11 @@ export default function EternalCorePage() {
                     .animate-scroll-y:hover {
                         animation-play-state: paused;
                     }
+                    @media (prefers-reduced-motion: reduce) {
+                        .animate-scroll-y {
+                            animation: none;
+                        }
+                    }
                   `}</style>
                 </div>
               </div>

components/builds/build-table.tsx

@@ -26,7 +26,9 @@ export function BuildTable({
           className="flex flex-col items-center justify-center gap-4 py-32 text-gray-400"
         >
           <Loader2 className="h-8 w-8 animate-spin text-blue-500 motion-reduce:animate-none" />
-          <p className="animate-pulse font-medium text-sm">Fetching builds for {project.name}…</p>
+          <p className="animate-pulse font-medium text-sm motion-reduce:animate-none">
+            Fetching builds for {project.name}…
+          </p>
         </output>
       ) : (
         <div className="overflow-hidden rounded-xl border border-gray-200 bg-white/60 backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/40">

components/contribute/contribution-card.tsx

@@ -4,6 +4,7 @@ import { m } from "framer-motion";
 import { LucideIcon } from "@/components/lucide-icon";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
 
 const itemVariants = {
   hidden: { y: 20, opacity: 0 },
@@ -35,9 +36,10 @@ export function ContributionCard({
   color,
 }: ContributionCardProps) {
   const external = href.startsWith("http");
+  const prefersReducedMotion = useReducedMotion();
 
   return (
-    <m.div className="h-full" variants={itemVariants}>
+    <m.div className="h-full" variants={prefersReducedMotion ? undefined : itemVariants}>
       <Card className="group flex h-full flex-col p-6 transition-colors duration-300 hover:bg-gray-50 hover:shadow-md dark:hover:bg-gray-800/60">
         <div
           className="pointer-events-none absolute inset-0 bg-linear-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100"

components/contribute/contribution-hint.tsx

@@ -3,15 +3,18 @@
 import { m } from "framer-motion";
 import { HelpCircle } from "lucide-react";
 import Link from "next/link";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
 
 export function ContributionHint() {
+  const prefersReducedMotion = useReducedMotion();
+
   return (
     <m.div
       className="mt-20 text-center"
-      initial={{ opacity: 0, y: 10 }}
-      transition={{ delay: 0.2, duration: 0.5 }}
-      viewport={{ once: true, margin: "-50px" }}
-      whileInView={{ opacity: 1, y: 0 }}
+      initial={prefersReducedMotion ? false : { opacity: 0, y: 10 }}
+      transition={prefersReducedMotion ? { duration: 0 } : { delay: 0.2, duration: 0.5 }}
+      viewport={prefersReducedMotion ? undefined : { once: true, margin: "-50px" }}
+      whileInView={prefersReducedMotion ? undefined : { opacity: 1, y: 0 }}
     >
       <div className="inline-flex items-center rounded-full border border-gray-200 bg-white px-6 py-2 shadow-xs dark:border-gray-800 dark:bg-gray-900/50">
         <HelpCircle className="mr-2 h-4 w-4 text-gray-500" />

components/docs/content/docs-header.tsx

@@ -33,7 +33,7 @@ export function DocsHeader({ category, title, description, icon, actions }: DocH
             transition={{ delay: prefersReducedMotion ? 0 : 0.1 }}
           >
             <span className="relative flex h-1.5 w-1.5">
-              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75" />
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75 motion-reduce:animate-none" />
               <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-blue-500" />
             </span>
             {category}

components/docs/content/docs-navigation.tsx

@@ -28,7 +28,7 @@ export function DocsNavigation({ prev, next }: DocsNavigationProps) {
         <Link
           aria-label={`Previous: ${prev.title}`}
           className={cn(
-            "group relative flex h-full w-full flex-1 flex-col gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-5 transition-all hover:border-blue-300 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-blue-700 dark:hover:bg-gray-900",
+            "group relative flex h-full w-full flex-1 flex-col gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-5 transition-[border-color,box-shadow,background-color] hover:border-blue-300 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-blue-700 dark:hover:bg-gray-900",
             "sm:max-w-[50%]"
           )}
           href={prev.path}
@@ -61,7 +61,7 @@ export function DocsNavigation({ prev, next }: DocsNavigationProps) {
         <Link
           aria-label={`Next: ${next.title}`}
           className={cn(
-            "group relative flex h-full w-full flex-1 flex-col items-end gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-5 text-right transition-all hover:border-blue-300 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-blue-700 dark:hover:bg-gray-900",
+            "group relative flex h-full w-full flex-1 flex-col items-end gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-5 text-right transition-[border-color,box-shadow,background-color] hover:border-blue-300 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-blue-700 dark:hover:bg-gray-900",
             "sm:max-w-[50%]"
           )}
           href={next.path}

components/docs/content/loading-fallback.tsx

@@ -5,7 +5,7 @@ const skeletonKeys = Array.from({ length: 5 }, () => crypto.randomUUID());
 export function LoadingFallback() {
   return (
     <div
-      className="animate-pulse space-y-4"
+      className="animate-pulse space-y-4 motion-reduce:animate-none"
       style={{
         contentVisibility: "auto",
         containIntrinsicSize: "auto 500px",

components/docs/eternalcore/commands/commands-search-bar.tsx

@@ -26,7 +26,7 @@ export function CommandsSearchBar({
         <Search className="absolute top-1/2 left-3 -translate-y-1/2 text-gray-400" size={18} />
         <input
           className={cn(
-            "w-full select-none rounded-lg border bg-white px-4 py-2.5 pr-10 pl-10 text-sm outline-hidden transition-all duration-200",
+            "w-full select-none rounded-lg border bg-white px-4 py-2.5 pr-10 pl-10 text-sm outline-hidden transition-[border-color,box-shadow] duration-200",
             isInputFocused
               ? "border-blue-500 shadow-blue-500/20 shadow-lg ring-2 ring-blue-500/50 dark:shadow-blue-500/10"
               : "border-gray-300 shadow-xs dark:border-gray-700",

components/docs/eternalcore/placeholder/placeholder-category-buttons.tsx

@@ -20,7 +20,7 @@ export function PlaceholderCategoryButtons({
       {categories.map((category) => (
         <button
           className={cn(
-            "flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1.5 font-medium text-xs transition-all",
+            "flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1.5 font-medium text-xs transition-[background-color,box-shadow,color]",
             category === activeCategory
               ? "bg-blue-500 text-white shadow-blue-500/30 shadow-md"
               : "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"

components/docs/eternalcore/placeholder/placeholder-search-bar.tsx

@@ -26,7 +26,7 @@ export function PlaceholderSearchBar({
         <Search className="absolute top-1/2 left-3 -translate-y-1/2 text-gray-400" size={18} />
         <input
           className={cn(
-            "w-full select-none rounded-lg border bg-white px-4 py-2.5 pr-10 pl-10 text-sm outline-hidden transition-all duration-200",
+            "w-full select-none rounded-lg border bg-white px-4 py-2.5 pr-10 pl-10 text-sm outline-hidden transition-[border-color,box-shadow] duration-200",
             isInputFocused
               ? "border-blue-500 shadow-blue-500/20 shadow-lg ring-2 ring-blue-500/50 dark:shadow-blue-500/10"
               : "border-gray-300 shadow-xs dark:border-gray-700",

components/docs/search/search-box.tsx

@@ -141,7 +141,7 @@ const SearchBox = ({
             aria-label="Search documentation"
             autoComplete="off"
             className={cn(
-              "w-full cursor-pointer select-none rounded-lg border bg-gray-50/50 px-4 py-2.5 pr-10 pl-10 text-sm outline-hidden transition-all duration-200",
+              "w-full cursor-pointer select-none rounded-lg border bg-gray-50/50 px-4 py-2.5 pr-10 pl-10 text-sm outline-hidden transition-[border-color,background-color,box-shadow,color] duration-200",
               isFocused || isOpen
                 ? "border-blue-500 bg-white shadow-blue-500/10 shadow-lg ring-2 ring-blue-500/10 dark:bg-gray-800 dark:shadow-blue-500/20"
                 : "border-gray-200 shadow-xs hover:border-gray-300 hover:bg-white dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-gray-700 dark:hover:bg-gray-900",
@@ -279,7 +279,7 @@ const SearchBox = ({
                   {results.map((result, index) => (
                     <motion.button
                       className={cn(
-                        "touch-action-manipulation w-full select-none px-4 py-3 text-left transition-all",
+                        "touch-action-manipulation w-full select-none px-4 py-3 text-left transition-[background-color,transform]",
                         selectedIndex === index
                           ? "bg-blue-50 dark:bg-blue-500/10"
                           : "hover:bg-gray-50 dark:hover:bg-gray-800/50"

components/docs/search/search-modal.tsx

@@ -384,7 +384,7 @@ export function SearchModal({ isOpen, onClose, triggerRef }: SearchModalProps) {
                         {results.map((result, index) => (
                           <motion.button
                             className={cn(
-                              "group touch-action-manipulation relative w-full cursor-pointer rounded-lg px-3 py-3 text-left transition-all",
+                              "group touch-action-manipulation relative w-full cursor-pointer rounded-lg px-3 py-3 text-left transition-[background-color,box-shadow,transform]",
                               selectedIndex === index
                                 ? "bg-gradient-to-r from-blue-50 to-blue-50/50 shadow-sm dark:from-blue-500/10 dark:to-blue-500/5"
                                 : "hover:bg-gray-50 dark:hover:bg-gray-800/50"