feat: Implement interactive spotlight effect on cards and list borders using mouse tracking.

Author: paripsky

src/components/MyWork.astro

@@ -84,8 +84,13 @@ const projects = [
     projects.map((project, i) => (
       <li class="h-full">
         <div
-          class={`p-4 h-full relative border hover:border-zinc-500 transition-all duration-300 rounded-xl border-zinc-700 bg-slate-900/20 backdrop-blur-sm`}
+          class={`p-4 h-full relative border border-zinc-700 bg-slate-900/20 backdrop-blur-sm rounded-xl overflow-hidden group`}
+          data-spotlight
         >
+          <div
+            class="absolute inset-0 -z-10 rounded-xl border border-zinc-500 transition-opacity duration-300 pointer-events-none"
+            style="mask-image: radial-gradient(200px circle at var(--x) var(--y), black, transparent);"
+          />
           {project.image && (
             <Image
               class="absolute right-3 top-3 rounded-full"

src/components/Podcasts.astro

@@ -64,7 +64,14 @@ const podcasts = [
 <ul class="flex flex-col gap-8">
     {
         podcasts.map((podcast) => (
-            <li class="group flex flex-col gap-2 border-l-2 border-transparent hover:border-zinc-500 pl-4 transition-all py-1">
+            <li
+                class="group relative flex flex-col gap-2 border-l-2 border-transparent pl-4 transition-all py-1"
+                data-spotlight
+            >
+                <div
+                    class="absolute left-[-2px] top-0 bottom-0 w-[2px] bg-zinc-500 transition-opacity duration-300 pointer-events-none"
+                    style="mask-image: radial-gradient(200px circle at var(--x) var(--y), black, transparent);"
+                />
                 <div class="flex flex-col gap-1">
                     <div class="flex items-center gap-2">
                         <h2 class="text-base font-medium tracking-tight text-neutral-100 group-hover:text-white transition-colors">

src/components/Post.astro

@@ -22,8 +22,14 @@ const { post } = Astro.props;
 ---
 
 <li
-  class="group flex flex-col gap-2 border-l-2 border-transparent hover:border-zinc-500 pl-4 transition-all py-1"
+  class="group relative flex flex-col gap-2 border-l-2 border-transparent pl-4 transition-all py-1"
+  data-spotlight
 >
+  <div
+    class="absolute left-[-2px] top-0 bottom-0 w-[2px] bg-zinc-500 transition-opacity duration-300 pointer-events-none"
+    style="mask-image: radial-gradient(200px circle at var(--x) var(--y), black, transparent);"
+  >
+  </div>
   <a href={post.url} class="block h-full">
     <div class="flex flex-col justify-between gap-1 items-baseline">
       <h2
@@ -49,18 +55,18 @@ const { post } = Astro.props;
           {post.mentions.length > 0 && (
             <span class="flex flex-wrap gap-1 text-neutral-400">
               Featured in
-              <div>
+              <div class="flex gap-1 flex-wrap">
                 {post.mentions.map((mention, i) => (
-                  <>
-                    {i !== 0 && <span>, </span>}
+                  <div class="flex">
                     <a
                       href={mention.url}
                       target="_blank"
                       class="text-neutral-100 hover:text-sky-300 transition-colors"
                     >
                       {mention.title}
                     </a>
-                  </>
+                    {i < post.mentions.length - 1 && <span>, </span>}
+                  </div>
                 ))}
               </div>
             </span>

src/components/Presentations.astro

@@ -36,7 +36,14 @@ const presentations = [
 <ul class="flex flex-col gap-8">
   {
     presentations.map((presentation) => (
-      <li class="group flex flex-col gap-2 border-l-2 border-transparent hover:border-zinc-500 pl-4 transition-all py-1">
+      <li
+        class="group relative flex flex-col gap-2 border-l-2 border-transparent pl-4 transition-all py-1"
+        data-spotlight
+      >
+        <div
+          class="absolute left-[-2px] top-0 bottom-0 w-[2px] bg-zinc-500 transition-opacity duration-300 pointer-events-none"
+          style="mask-image: radial-gradient(200px circle at var(--x) var(--y), black, transparent);"
+        />
         <div class="flex flex-col gap-1">
           <h2 class="text-base font-medium tracking-tight text-neutral-100 group-hover:text-white transition-colors">
             {presentation.title}

src/layouts/Layout.astro

@@ -58,5 +58,23 @@ const { title } = Astro.props;
     style="color-scheme: dark;"
   >
     <slot />
+    <script is:inline>
+      document.addEventListener("astro:page-load", () => {
+        if (!window.matchMedia("(pointer: fine)").matches) return;
+
+        const cards = document.querySelectorAll("[data-spotlight]");
+
+        document.addEventListener("mousemove", (e) => {
+          cards.forEach((card) => {
+            const rect = card.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+
+            card.style.setProperty("--x", `${x}px`);
+            card.style.setProperty("--y", `${y}px`);
+          });
+        });
+      });
+    </script>
   </body>
 </html>

src/styles/global.css

@@ -2,6 +2,11 @@
 @plugin "@tailwindcss/typography";
 @plugin "tailwindcss-motion";
 
+[data-spotlight] {
+    --x: -10000px;
+    --y: -10000px;
+}
+
 @media (prefers-reduced-motion: no-preference) {
     html {
         scroll-behavior: smooth;