Restore original article hover visuals

Author: MakerFlyFly

src/app/blog/page.tsx

@@ -6,7 +6,7 @@ import { motion, useReducedMotion } from "motion/react";
 import { useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { MotionButton, MotionLabel } from "@/components/motion-primitives";
-import { articleRowHover, cardReveal, motionViewport, pageEnter } from "@/lib/motion-presets";
+import { cardReveal, motionViewport, pageEnter } from "@/lib/motion-presets";
 import { groupBlogsByYear } from "@/lib/blog-index";
 import { readFileAsText } from "@/lib/file-utils";
 import { getErrorMessage } from "@/lib/utils";
@@ -195,74 +195,43 @@ export default function BlogPage() {
                     transition: { duration: 0.26, delay: index * 0.025 },
                   };
 
-                  if (!editing) {
-                    return (
-                      <MotionLink
-                        className="blog-list-item"
-                        href={`/blog/${item.slug}`}
-                        key={item.slug}
-                        prefetch={false}
-                        {...itemRevealProps}
-                        {...articleRowHover(reduced)}
-                      >
-                        <time dateTime={item.date}>{item.date.slice(5)}</time>
-
-                        <div>
-                          <span className="blog-title-link">
-                            <span className="article-row-title-text">{item.title}</span>
-                            <span aria-hidden="true" className="article-row-title-gradient">
-                              {item.title}
-                            </span>
-                          </span>
-                          <p>{item.summary}</p>
-                          <div className="tag-row">
-                            {item.tags.map((tag) => (
-                              <span className="tag" key={tag}>
-                                #{tag}
-                              </span>
-                            ))}
-                          </div>
-                        </div>
-                      </MotionLink>
-                    );
-                  }
-
                   return (
                     <motion.article
                       className={checked ? "blog-list-item selected" : "blog-list-item"}
                       key={item.slug}
                       layout={editing && !reduced ? "position" : false}
                       {...itemRevealProps}
-                      {...articleRowHover(reduced)}
                     >
-                      <input
-                        checked={checked}
-                        className="select-check"
-                        type="checkbox"
-                        onChange={(event) => {
-                          setSelected((current) => {
-                            const next = new Set(current);
-                            if (event.target.checked) {
-                              next.add(item.slug);
-                            } else {
-                              next.delete(item.slug);
-                            }
-                            return next;
-                          });
-                        }}
-                      />
+                      {editing ? (
+                        <input
+                          checked={checked}
+                          className="select-check"
+                          type="checkbox"
+                          onChange={(event) => {
+                            setSelected((current) => {
+                              const next = new Set(current);
+                              if (event.target.checked) {
+                                next.add(item.slug);
+                              } else {
+                                next.delete(item.slug);
+                              }
+                              return next;
+                            });
+                          }}
+                        />
+                      ) : (
+                        <time dateTime={item.date}>{item.date.slice(5)}</time>
+                      )}
 
                       <div>
-                        <Link
+                        <MotionLink
                           className="blog-title-link"
                           href={`/blog/${item.slug}`}
                           prefetch={false}
+                          {...(!reduced ? { whileHover: { x: 2 } } : {})}
                         >
-                          <span className="article-row-title-text">{item.title}</span>
-                          <span aria-hidden="true" className="article-row-title-gradient">
-                            {item.title}
-                          </span>
-                        </Link>
+                          {item.title}
+                        </MotionLink>
                         <p>{item.summary}</p>
                         <div className="tag-row">
                           {item.tags.map((tag) => (

src/app/globals.css

@@ -698,94 +698,43 @@ button {
   display: grid;
   grid-template-columns: 72px 1fr;
   gap: 18px;
-  overflow: hidden;
-  contain: paint;
   border-radius: 18px;
   padding: 14px;
-  backface-visibility: hidden;
-  transform: translateZ(0);
-  transition:
-    color 180ms ease;
+  transform-origin: center;
+  will-change: transform;
 }
 
 .home-article-row::before {
   position: absolute;
   inset: 0;
   z-index: -1;
   border-radius: inherit;
-  background:
-    linear-gradient(112deg, rgba(255, 255, 255, 0.78) 0%, rgba(142, 216, 255, 0.2) 58%, rgba(238, 194, 94, 0.18) 100%),
-    rgba(255, 255, 255, 0.58);
-  box-shadow: inset 0 0 0 1px rgba(47, 203, 231, 0.16);
+  background: rgba(255, 255, 255, 0.58);
   content: "";
   opacity: 0;
   pointer-events: none;
-  transition: opacity 180ms ease;
+  will-change: opacity;
 }
 
-.home-article-row:hover,
-.home-article-row:focus-visible {
-  will-change: transform;
-}
-
-.home-article-row:focus-visible,
-.blog-list-item:focus-visible,
-.blog-list-item:focus-within {
-  outline: 2px solid rgba(47, 203, 231, 0.42);
-  outline-offset: -3px;
-}
-
-.home-article-row:hover::before,
-.home-article-row:focus-visible::before {
+.home-article-row:hover::before {
   opacity: 1;
 }
 
-.home-article-row:hover strong,
-.home-article-row:focus-visible strong {
-  transform: translate3d(2px, 0, 0);
-}
-
 .home-article-row time {
   color: var(--gold);
   font-size: 0.88rem;
   font-weight: 900;
 }
 
-.article-row-title,
+.home-article-row strong,
 .home-article-row small {
   display: block;
 }
 
-.article-row-title {
-  position: relative;
+.home-article-row strong {
   color: var(--foreground);
   font-size: 1rem;
   font-weight: 900;
-  transition:
-    text-shadow 180ms ease,
-    transform 180ms ease;
-}
-
-.article-row-title-gradient {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(112deg, var(--cyan) 0%, #2f80ff 36%, #8ed8ff 64%, var(--gold) 100%);
-  background-clip: text;
-  color: transparent;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 180ms ease;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.home-article-row:hover .article-row-title-gradient,
-.home-article-row:focus-visible .article-row-title-gradient,
-.blog-title-link:hover .article-row-title-gradient,
-.blog-title-link:focus-visible .article-row-title-gradient,
-.blog-list-item:hover .article-row-title-gradient,
-.blog-list-item:focus-within .article-row-title-gradient {
-  opacity: 1;
 }
 
 .home-article-row small {
@@ -993,20 +942,6 @@ button {
     animation: none;
     opacity: 0;
   }
-
-  .home-article-row strong,
-  .blog-title-link {
-    transition: text-shadow 160ms ease;
-  }
-
-  .home-article-row:hover strong,
-  .home-article-row:focus-visible strong,
-  .blog-title-link:hover,
-  .blog-title-link:focus-visible,
-  .blog-list-item:hover .blog-title-link,
-  .blog-list-item:focus-within .blog-title-link {
-    transform: none;
-  }
 }
 
 @media (max-width: 1120px) {
@@ -1415,36 +1350,23 @@ button {
   grid-template-columns: 72px 1fr auto;
   gap: 18px;
   align-items: start;
-  overflow: hidden;
-  contain: paint;
   border-radius: 20px;
   padding: 14px;
-  backface-visibility: hidden;
-  transform: translateZ(0);
 }
 
 .blog-list-item::before {
   position: absolute;
   inset: 0;
   z-index: -1;
   border-radius: inherit;
-  background:
-    linear-gradient(112deg, rgba(255, 255, 255, 0.78) 0%, rgba(142, 216, 255, 0.2) 58%, rgba(238, 194, 94, 0.18) 100%),
-    rgba(255, 255, 255, 0.58);
-  box-shadow: inset 0 0 0 1px rgba(47, 203, 231, 0.16);
+  background: rgba(255, 255, 255, 0.58);
   content: "";
   opacity: 0;
   pointer-events: none;
   transition: opacity 180ms ease;
 }
 
-.blog-list-item:hover,
-.blog-list-item:focus-within {
-  will-change: transform;
-}
-
 .blog-list-item:hover::before,
-.blog-list-item:focus-within::before,
 .blog-list-item.selected::before {
   opacity: 1;
 }
@@ -1457,36 +1379,10 @@ button {
 }
 
 .blog-title-link {
-  position: relative;
   display: inline-block;
   color: var(--foreground);
   font-size: 1rem;
   font-weight: 900;
-  transform: translateZ(0);
-  transition:
-    text-shadow 180ms ease,
-    transform 180ms ease;
-}
-
-.blog-title-link:hover,
-.blog-title-link:focus-visible,
-.blog-list-item:hover .blog-title-link,
-.blog-list-item:focus-within .blog-title-link {
-  text-shadow: 0 8px 22px rgba(47, 203, 231, 0.12);
-  transform: translate3d(2px, 0, 0);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .blog-title-link {
-    transition: text-shadow 160ms ease;
-  }
-
-  .blog-title-link:hover,
-  .blog-title-link:focus-visible,
-  .blog-list-item:hover .blog-title-link,
-  .blog-list-item:focus-within .blog-title-link {
-    transform: none;
-  }
 }
 
 .blog-list-item p {

src/components/home-content-sections.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { ArrowRight, ExternalLink, GitBranch, Package } from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
 import { MotionCard } from "@/components/motion-primitives";
-import { articleRowHover, buttonTap, cardReveal, motionViewport } from "@/lib/motion-presets";
+import { buttonTap, cardReveal, motionViewport } from "@/lib/motion-presets";
 import { projects, visibleArticles } from "@/data/content";
 import type { ProjectRecord } from "@/types/content";
 
@@ -88,22 +88,18 @@ export function HomeContentSections() {
         viewport={motionViewport}
       >
         {previewArticles.length > 0 ? (
-          previewArticles.map((article) => (
+          previewArticles.map((article, index) => (
             <MotionLink
               className="home-article-row"
               href={`/blog/${article.slug}`}
               key={article.slug}
               prefetch={false}
-              {...articleRowHover(reduced)}
+              style={{ transitionDelay: `${index * 35}ms` }}
+              {...buttonTap(reduced)}
             >
               <time dateTime={article.date}>{article.date.slice(5)}</time>
               <span>
-                <strong className="article-row-title">
-                  <span className="article-row-title-text">{article.title}</span>
-                  <span aria-hidden="true" className="article-row-title-gradient">
-                    {article.title}
-                  </span>
-                </strong>
+                <strong>{article.title}</strong>
                 <small>{article.summary}</small>
               </span>
             </MotionLink>

src/lib/motion-presets.ts

@@ -10,7 +10,6 @@ export const motionDurations = {
   card: 0.34,
   panel: 0.2,
   button: 0.16,
-  articleRow: 0.18,
 } as const;
 
 export function pageEnter(reducedMotion: boolean, delay = 0) {
@@ -66,19 +65,3 @@ export function buttonTap(reducedMotion: boolean) {
         transition: { duration: motionDurations.button, ease: motionEase },
       };
 }
-
-export function articleRowHover(reducedMotion: boolean) {
-  return reducedMotion
-    ? {}
-    : {
-        whileHover: {
-          y: -3,
-          scale: 1.01,
-          transition: { duration: motionDurations.articleRow, ease: motionEase },
-        },
-        whileTap: {
-          scale: 0.99,
-          transition: { duration: motionDurations.button, ease: motionEase },
-        },
-      };
-}