Animated Highlight Text

1"use client";
2 
3import * as React from "react";
4import {
5  AnimatePresence,
6  type Variants,
7  motion,
8  useMotionValue,
9  useReducedMotion,
10  useSpring,
11} from "motion/react";
12import { cn } from "@/lib/utils";
13 
14/* ------------------------------------------------------------------ */
15/*  draw engine                                                       */
16/* ------------------------------------------------------------------ */
17/*
18 * The animation is a stroke DRAW-ON: each path animates its own
19 * `pathLength` from 0 → 1 so the line paints itself in, then STOPS
20 * (no looping, no shaking, no moving the whole icon). At rest every
21 * path sits fully drawn (pathLength 1). <Highlight> tracks hover/focus
22 * and pushes the play state down through DrawContext, so hovering the
23 * word re-draws its icon once.
24 */
25 
26type DrawState = "rest" | "draw";
27const DrawContext = React.createContext<DrawState>("rest");
28 
29export interface AnimatedIconProps {
30  className?: string;
31}
32 
33const drawVariants = (delay = 0, duration = 0.55): Variants => ({
34  rest: { pathLength: 1, opacity: 1 },
35  draw: {
36    pathLength: [0, 1],
37    opacity: [0, 1],
38    transition: {
39      pathLength: { duration, ease: "easeInOut", delay },
40      opacity: { duration: 0.12, delay },
41    },
42  },
43});
44 
45/** A single stroke that paints itself in when the highlight is active. */
46function DrawPath({
47  d,
48  delay = 0,
49  duration = 0.55,
50}: {
51  d: string;
52  delay?: number;
53  duration?: number;
54}) {
55  const state = React.useContext(DrawContext);
56  return (
57    <motion.path
58      d={d}
59      variants={drawVariants(delay, duration)}
60      initial="rest"
61      animate={state}
62    />
63  );
64}
65 
66function IconBase({
67  className,
68  children,
69}: {
70  className?: string;
71  children: React.ReactNode;
72}) {
73  return (
74    <svg
75      viewBox="0 0 24 24"
76      fill="none"
77      stroke="currentColor"
78      strokeWidth={2}
79      strokeLinecap="round"
80      strokeLinejoin="round"
81      aria-hidden="true"
82      className={cn("inline-block size-[1.15em] align-[-0.22em]", className)}
83    >
84      {children}
85    </svg>
86  );
87}
88 
89/* ------------------------------------------------------------------ */
90/*  icons — each redraws its own strokes on hover                     */
91/* ------------------------------------------------------------------ */
92 
93/* heart: outline draws in, then the fill washes back over it */
94const HEART_D =
95// … truncated