Add HandDrawn component with dark mode support, apply to homepage and collection pages

Port hand-drawn visual effects (highlight, underline, circle variants)
with dark mode fixes: CSS variable-based text color, reduced highlighter
opacity in dark mode, and proper static text fallback for non-animated
instances. Applied orange underline to hero text, teal/green circles to
stats, yellow highlight to "Heritage", and underlines on collection headers.

site/src/components/HandDrawn.astro

@@ -0,0 +1,381 @@
+---
+/**
+ * HandDrawn - Reusable hand-drawn effects for emphasis with animations
+ *
+ * Variants:
+ * - highlight: Highlighter blob behind text (dark text, colored background)
+ * - underline: Squiggly underline beneath text
+ * - circle: Hand-drawn circle/oval around text
+ *
+ * Colors:
+ * - yellow (default): Classic yellow highlighter
+ * - pink: Pink/magenta emphasis
+ * - green: Green emphasis
+ * - blue: Blue emphasis
+ * - orange: Warm orange emphasis
+ * - teal: Teal/cyan emphasis
+ *
+ * Animation:
+ * - animate: Enable draw-on/fade-in animations (default: true)
+ * - trigger: 'load' (immediate) or 'visible' (when scrolled into view)
+ * - delay: Animation delay in ms (default: 0)
+ * - duration: Animation duration in ms (default: 600 for draw, 400 for highlight)
+ */
+
+interface Props {
+  variant?: 'highlight' | 'underline' | 'circle';
+  color?: 'yellow' | 'pink' | 'green' | 'blue' | 'orange' | 'teal';
+  animate?: boolean;
+  trigger?: 'load' | 'visible';
+  delay?: number;
+  duration?: number;
+  class?: string;
+}
+
+const {
+  variant = 'highlight',
+  color = 'yellow',
+  animate = true,
+  trigger = 'visible',
+  delay = 0,
+  duration = variant === 'highlight' ? 400 : 600,
+  class: className = '',
+} = Astro.props;
+
+// Color mappings for realistic highlighter colors (Staedtler Textsurfer Classic inspired)
+// Uses custom CSS classes for authentic fluorescent marker look
+const colorMap = {
+  yellow: {
+    highlight: { primary: 'hd-fill-yellow', secondary: 'hd-fill-yellow-light' },
+    underline: 'hd-stroke-yellow',
+    circle: 'hd-stroke-yellow',
+  },
+  pink: {
+    highlight: { primary: 'hd-fill-pink', secondary: 'hd-fill-pink-light' },
+    underline: 'hd-stroke-pink',
+    circle: 'hd-stroke-pink',
+  },
+  green: {
+    highlight: { primary: 'hd-fill-green', secondary: 'hd-fill-green-light' },
+    underline: 'hd-stroke-green',
+    circle: 'hd-stroke-green',
+  },
+  blue: {
+    highlight: { primary: 'hd-fill-blue', secondary: 'hd-fill-blue-light' },
+    underline: 'hd-stroke-blue',
+    circle: 'hd-stroke-blue',
+  },
+  orange: {
+    highlight: { primary: 'hd-fill-orange', secondary: 'hd-fill-orange-light' },
+    underline: 'hd-stroke-orange',
+    circle: 'hd-stroke-orange',
+  },
+  teal: {
+    highlight: { primary: 'hd-fill-teal', secondary: 'hd-fill-teal-light' },
+    underline: 'hd-stroke-teal',
+    circle: 'hd-stroke-teal',
+  },
+};
+
+const colors = colorMap[color];
+
+// Generate unique ID for this instance
+const id = `hd-${Math.random().toString(36).slice(2, 9)}`;
+
+// Animation classes
+const animateClass = animate ? 'hand-drawn-animate' : '';
+const triggerClass = trigger === 'visible' ? 'hand-drawn-observe' : 'hand-drawn-immediate';
+
+// Circle-specific randomization for organic feel
+const circleJitterScale = 0.8 + Math.random() * 0.4;
+const circleSpeedMultiplier = 0.9 + Math.random() * 0.4;
+const circleStrokeLength = 85 + Math.floor(Math.random() * 8);
+---
+
+{variant === 'highlight' && (
+  <span
+    class:list={['relative inline-block hand-drawn-wrapper', animateClass, triggerClass, className]}
+    data-hand-drawn={id}
+    style={`--hd-delay: ${delay}ms; --hd-duration: ${duration}ms;`}
+  >
+    <span class:list={["relative z-10 px-1", animate ? 'hand-drawn-text' : 'hand-drawn-text-static']}>
+      <slot />
+    </span>
+    <svg
+      class="absolute -inset-x-3 -top-1 -bottom-3 w-[calc(100%+24px)] h-[calc(100%+16px)] -rotate-1 hand-drawn-highlight"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M 2,8 Q 5,2 15,5 L 50,3 Q 60,1 75,4 L 92,6 Q 98,8 97,15 L 99,45 Q 100,55 98,70 L 96,88 Q 94,97 85,96 L 50,98 Q 30,99 15,97 L 5,95 Q 1,93 2,85 L 1,50 Q 0,30 2,8 Z"
+        class:list={[colors.highlight.primary, 'hand-drawn-highlight-outer']}
+      />
+      <path
+        d="M 8,12 Q 12,6 25,9 L 55,7 Q 65,5 78,8 L 88,10 Q 94,14 92,25 L 94,50 Q 95,65 93,78 L 90,88 Q 86,94 75,92 L 45,94 Q 28,95 15,93 L 8,90 Q 4,86 5,75 L 4,45 Q 3,28 8,12 Z"
+        class:list={[colors.highlight.secondary, 'hand-drawn-highlight-inner']}
+      />
+    </svg>
+  </span>
+)}
+
+{variant === 'underline' && (
+  <span
+    class:list={['relative inline-block hand-drawn-wrapper', animateClass, triggerClass, className]}
+    data-hand-drawn={id}
+    style={`--hd-delay: ${delay}ms; --hd-duration: ${duration}ms;`}
+  >
+    <slot />
+    <svg
+      class="absolute -bottom-1 left-0 w-full h-4 overflow-visible"
+      viewBox="0 0 200 16"
+      preserveAspectRatio="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M 2,7 C 15,8 35,10 60,9 C 100,7 140,8 175,10 Q 190,11 198,9"
+        fill="none"
+        class:list={[colors.underline, 'hand-drawn-stroke']}
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        pathLength="100"
+      />
+    </svg>
+  </span>
+)}
+
+{variant === 'circle' && (
+  <span
+    class:list={['relative inline-block hand-drawn-wrapper hand-drawn-circle', animateClass, triggerClass, className]}
+    data-hand-drawn={id}
+    style={`--hd-delay: ${delay}ms; --hd-duration: ${Math.round(duration * 1.8 * circleSpeedMultiplier)}ms; --hd-jitter-scale: ${circleJitterScale.toFixed(2)}; --hd-stroke-length: ${circleStrokeLength};`}
+  >
+    <span class="px-2"><slot /></span>
+    <svg
+      class="absolute -inset-y-4 -inset-x-3 w-[calc(100%+24px)] h-[calc(100%+32px)] hand-drawn-circle-svg"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M 50,8 Q 80,5 95,25 Q 100,50 95,75 Q 80,95 50,93 Q 20,95 5,75 Q 0,50 5,25 Q 20,5 48,9"
+        fill="none"
+        class:list={[colors.circle, 'hand-drawn-stroke hand-drawn-circle-stroke']}
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        pathLength="100"
+      />
+    </svg>
+  </span>
+)}
+
+<style is:global>
+  /* === Hand-drawn highlight fill colors (Staedtler Textsurfer Classic inspired) === */
+  .hd-fill-yellow { fill: rgba(255, 247, 0, 0.55); }
+  .hd-fill-yellow-light { fill: rgba(255, 251, 120, 0.30); }
+  .hd-fill-pink { fill: rgba(255, 105, 180, 0.50); }
+  .hd-fill-pink-light { fill: rgba(255, 182, 213, 0.28); }
+  .hd-fill-green { fill: rgba(0, 255, 127, 0.45); }
+  .hd-fill-green-light { fill: rgba(144, 255, 190, 0.25); }
+  .hd-fill-blue { fill: rgba(0, 191, 255, 0.45); }
+  .hd-fill-blue-light { fill: rgba(135, 206, 250, 0.28); }
+  .hd-fill-orange { fill: rgba(255, 165, 0, 0.55); }
+  .hd-fill-orange-light { fill: rgba(255, 200, 100, 0.30); }
+  .hd-fill-teal { fill: rgba(20, 184, 166, 0.45); }
+  .hd-fill-teal-light { fill: rgba(153, 246, 228, 0.28); }
+
+  /* === Hand-drawn stroke colors === */
+  .hd-stroke-yellow { stroke: rgba(255, 200, 0, 0.85); }
+  .hd-stroke-pink { stroke: rgba(255, 80, 160, 0.85); }
+  .hd-stroke-green { stroke: rgba(0, 200, 100, 0.85); }
+  .hd-stroke-blue { stroke: rgba(0, 150, 255, 0.85); }
+  .hd-stroke-orange { stroke: rgba(255, 140, 0, 0.85); }
+  .hd-stroke-teal { stroke: rgba(20, 184, 166, 0.85); }
+
+  /* === Highlight animations === */
+  .hand-drawn-highlight {
+    pointer-events: none;
+  }
+
+  .hand-drawn-highlight-outer,
+  .hand-drawn-highlight-inner {
+    transform-origin: center;
+  }
+
+  /* Text reveal for highlight variant */
+  .hand-drawn-text {
+    color: transparent;
+  }
+
+  /* Static text color for non-animated highlight */
+  .hand-drawn-text-static {
+    color: var(--hd-text-color, rgb(15 23 42));
+  }
+
+  .hand-drawn-animate.hand-drawn-active .hand-drawn-text {
+    animation: hand-drawn-text-reveal calc(var(--hd-duration) * 0.6) ease-out calc(var(--hd-delay) + var(--hd-duration) * 0.5) forwards;
+  }
+
+  @keyframes hand-drawn-text-reveal {
+    0% { color: transparent; }
+    100% { color: var(--hd-text-color, rgb(15 23 42)); }
+  }
+
+  /* Highlight blob animation */
+  .hand-drawn-animate .hand-drawn-highlight-outer {
+    opacity: 0;
+    transform: scale(0.3) rotate(-5deg);
+  }
+
+  .hand-drawn-animate.hand-drawn-active .hand-drawn-highlight-outer {
+    animation: hand-drawn-blob-outer var(--hd-duration) cubic-bezier(0.34, 1.56, 0.64, 1) var(--hd-delay) forwards;
+  }
+
+  @keyframes hand-drawn-blob-outer {
+    0% {
+      opacity: 0;
+      transform: scale(0.3) rotate(-5deg);
+    }
+    40% {
+      opacity: 0.8;
+      transform: scale(1.05) rotate(0.5deg);
+    }
+    70% {
+      opacity: 1;
+      transform: scale(0.98) rotate(-0.3deg);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1) rotate(0deg);
+    }
+  }
+
+  .hand-drawn-animate .hand-drawn-highlight-inner {
+    opacity: 0;
+    transform: scale(0.5) rotate(3deg);
+  }
+
+  .hand-drawn-animate.hand-drawn-active .hand-drawn-highlight-inner {
+    animation: hand-drawn-blob-inner var(--hd-duration) cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--hd-delay) + 80ms) forwards;
+  }
+
+  @keyframes hand-drawn-blob-inner {
+    0% {
+      opacity: 0;
+      transform: scale(0.5) rotate(3deg);
+    }
+    50% {
+      opacity: 0.7;
+      transform: scale(1.03) rotate(-0.5deg);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1) rotate(0deg);
+    }
+  }
+
+  /* === Underline / Circle stroke animations === */
+  .hand-drawn-animate .hand-drawn-stroke {
+    stroke-dasharray: 100;
+    stroke-dashoffset: 100;
+  }
+
+  .hand-drawn-animate.hand-drawn-active .hand-drawn-stroke {
+    animation: hand-drawn-draw var(--hd-duration) cubic-bezier(0.65, 0, 0.35, 1) var(--hd-delay) forwards;
+  }
+
+  @keyframes hand-drawn-draw {
+    0% { stroke-dashoffset: 100; }
+    100% { stroke-dashoffset: 0; }
+  }
+
+  /* Circle variant: slightly imperfect/organic stroke */
+  .hand-drawn-circle-stroke {
+    stroke-dasharray: var(--hd-stroke-length, 90);
+    stroke-dashoffset: var(--hd-stroke-length, 90);
+  }
+
+  .hand-drawn-animate.hand-drawn-active .hand-drawn-circle-stroke {
+    animation: hand-drawn-circle-draw var(--hd-duration) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--hd-delay) forwards;
+  }
+
+  @keyframes hand-drawn-circle-draw {
+    0% { stroke-dashoffset: var(--hd-stroke-length, 90); }
+    100% { stroke-dashoffset: 0; }
+  }
+
+  .hand-drawn-circle-svg {
+    transform: scale(var(--hd-jitter-scale, 1));
+  }
+
+  /* === Reduced motion === */
+  @media (prefers-reduced-motion: reduce) {
+    .hand-drawn-animate .hand-drawn-text {
+      color: var(--hd-text-color, rgb(15 23 42));
+      animation: none !important;
+    }
+    .hand-drawn-animate .hand-drawn-highlight-outer,
+    .hand-drawn-animate .hand-drawn-highlight-inner {
+      opacity: 1;
+      transform: scale(1) rotate(0deg);
+      animation: none !important;
+    }
+    .hand-drawn-animate .hand-drawn-stroke {
+      stroke-dashoffset: 0;
+      animation: none !important;
+    }
+    .hand-drawn-animate .hand-drawn-circle-stroke {
+      stroke-dashoffset: 0;
+      animation: none !important;
+    }
+  }
+
+  /* Dark mode: reduce highlighter fill opacity for readability */
+  .dark .hd-fill-yellow { fill: rgba(255, 247, 0, 0.45); }
+  .dark .hd-fill-yellow-light { fill: rgba(255, 251, 120, 0.25); }
+  .dark .hd-fill-pink { fill: rgba(255, 105, 180, 0.40); }
+  .dark .hd-fill-pink-light { fill: rgba(255, 182, 213, 0.22); }
+  .dark .hd-fill-green { fill: rgba(0, 255, 127, 0.35); }
+  .dark .hd-fill-green-light { fill: rgba(144, 255, 190, 0.20); }
+  .dark .hd-fill-blue { fill: rgba(0, 191, 255, 0.35); }
+  .dark .hd-fill-blue-light { fill: rgba(135, 206, 250, 0.22); }
+  .dark .hd-fill-orange { fill: rgba(255, 165, 0, 0.45); }
+  .dark .hd-fill-orange-light { fill: rgba(255, 200, 100, 0.25); }
+  .dark .hd-fill-teal { fill: rgba(20, 184, 166, 0.35); }
+  .dark .hd-fill-teal-light { fill: rgba(153, 246, 228, 0.22); }
+</style>
+
+<script>
+  // Intersection Observer for triggering animations when visible
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('hand-drawn-active');
+          observer.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0.3 }
+  );
+
+  function initHandDrawn() {
+    // Observe elements that trigger on visibility
+    document.querySelectorAll('.hand-drawn-observe').forEach((el) => {
+      observer.observe(el);
+    });
+
+    // Immediately activate elements that trigger on load
+    document.querySelectorAll('.hand-drawn-immediate').forEach((el) => {
+      el.classList.add('hand-drawn-active');
+    });
+  }
+
+  // Run on initial load
+  initHandDrawn();
+
+  // Re-run on Astro page transitions
+  document.addEventListener('astro:page-load', initHandDrawn);
+</script>

site/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '@/layouts/Layout.astro';
 import BookGrid from '@/components/BookGrid.astro';
+import HandDrawn from '@/components/HandDrawn.astro';
 import { getCollection } from 'astro:content';
 
 const allBooks = await getCollection('books');
@@ -29,7 +30,7 @@ const totalBooks = allBooks.length;
 
     <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold title-accent max-w-4xl mx-auto leading-tight">
       The Hand-Drawn References That
-      <span class="text-primary">Taught Generations</span>
+      <HandDrawn variant="underline" color="orange"><span class="text-primary">Taught Generations</span></HandDrawn>
     </h1>
 
     <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
@@ -75,11 +76,11 @@ const totalBooks = allBooks.length;
       <div class="text-sm text-muted-foreground">Collections</div>
     </div>
     <div class="text-center p-6 rounded-lg bg-card border border-border">
-      <div class="text-3xl font-bold text-primary">100+</div>
+      <div class="text-3xl font-bold text-primary"><HandDrawn variant="circle" color="teal">100+</HandDrawn></div>
       <div class="text-sm text-muted-foreground">Circuit Projects</div>
     </div>
     <div class="text-center p-6 rounded-lg bg-card border border-border">
-      <div class="text-3xl font-bold text-primary">Free</div>
+      <div class="text-3xl font-bold text-primary"><HandDrawn variant="circle" color="green">Free</HandDrawn></div>
       <div class="text-sm text-muted-foreground">PDF Downloads</div>
     </div>
   </section>
@@ -183,7 +184,7 @@ const totalBooks = allBooks.length;
   <section class="py-12 mt-8 border-t border-border">
     <div class="grid md:grid-cols-2 gap-8 items-center">
       <div class="space-y-4">
-        <h2 class="text-2xl font-bold title-accent">Preserving Electronics Heritage</h2>
+        <h2 class="text-2xl font-bold title-accent">Preserving Electronics <HandDrawn variant="highlight" color="yellow">Heritage</HandDrawn></h2>
         <p class="text-muted-foreground leading-relaxed">
           These references represent the golden age of hands-on electronics education. Forrest M. Mims III,
           a Texas A&M graduate and one of the most widely read electronics authors in history, taught millions

site/src/pages/mims/index.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '@/layouts/Layout.astro';
 import FilterableBookGrid from '@/components/FilterableBookGrid';
+import HandDrawn from '@/components/HandDrawn.astro';
 import { getCollection } from 'astro:content';
 import { serializeBook } from '@/lib/types';
 
@@ -32,7 +33,7 @@ const serializedBooks = mimsBooks.map(serializeBook);
       <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
         <div>
           <h1 class="text-3xl md:text-4xl font-bold title-accent">
-            Forrest Mims Mini-Notebooks
+            Forrest Mims <HandDrawn variant="underline" color="orange">Mini-Notebooks</HandDrawn>
           </h1>
           <p class="text-muted-foreground mt-2 max-w-2xl">
             The complete Radio Shack Engineer's Mini-Notebook series. Hand-illustrated electronics

site/src/pages/uglys/index.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '@/layouts/Layout.astro';
 import FilterableBookGrid from '@/components/FilterableBookGrid';
+import HandDrawn from '@/components/HandDrawn.astro';
 import { getCollection } from 'astro:content';
 import { serializeBook } from '@/lib/types';
 
@@ -32,7 +33,7 @@ const serializedBooks = uglysBooks.map(serializeBook);
       <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
         <div>
           <h1 class="text-3xl md:text-4xl font-bold title-accent">
-            Ugly's Electrical References
+            Ugly's <HandDrawn variant="underline" color="blue">Electrical References</HandDrawn>
           </h1>
           <p class="text-muted-foreground mt-2 max-w-2xl">
             The pocket-sized bible for electricians. Packed with tables, formulas, wiring diagrams,

site/src/styles/global.css

@@ -84,6 +84,7 @@
   --sidebar-accent-foreground: oklch(0.30 0.03 250);
   --sidebar-border: oklch(0.85 0.04 230);
   --sidebar-ring: oklch(0.55 0.12 250);
+  --hd-text-color: rgb(15 23 42);
 }
 
 .dark {
@@ -118,6 +119,7 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+  --hd-text-color: rgb(248 250 252);
 }
 
 @layer base {