"use client"; import * as React from "react"; import { AnimatePresence, type Variants, motion, useMotionValue, useReducedMotion, useSpring, } from "motion/react"; import { cn } from "@/lib/utils"; /* ------------------------------------------------------------------ */ /* draw engine */ /* ------------------------------------------------------------------ */ /* * The animation is a stroke DRAW-ON: each path animates its own * `pathLength` from 0 → 1 so the line paints itself in, then STOPS * (no looping, no shaking, no moving the whole icon). At rest every * path sits fully drawn (pathLength 1). tracks hover/focus * and pushes the play state down through DrawContext, so hovering the * word re-draws its icon once. */ type DrawState = "rest" | "draw"; const DrawContext = React.createContext("rest"); export interface AnimatedIconProps { className?: string; } const drawVariants = (delay = 0, duration = 0.55): Variants => ({ rest: { pathLength: 1, opacity: 1 }, draw: { pathLength: [0, 1], opacity: [0, 1], transition: { pathLength: { duration, ease: "easeInOut", delay }, opacity: { duration: 0.12, delay }, }, }, }); /** A single stroke that paints itself in when the highlight is active. */ function DrawPath({ d, delay = 0, duration = 0.55, }: { d: string; delay?: number; duration?: number; }) { const state = React.useContext(DrawContext); return ( ); } function IconBase({ className, children, }: { className?: string; children: React.ReactNode; }) { return ( ); } /* ------------------------------------------------------------------ */ /* icons — each redraws its own strokes on hover */ /* ------------------------------------------------------------------ */ /* heart: outline draws in, then the fill washes back over it */ const HEART_D = "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.49 4.04 3 5.5l7 7Z"; const FILL_REVEAL: Variants = { rest: { opacity: 1 }, draw: { opacity: [0, 0, 1], transition: { duration: 0.75, times: [0, 0.62, 1], ease: "easeOut" }, }, }; export function HeartIcon({ className }: AnimatedIconProps) { const state = React.useContext(DrawContext); return ( ); } /* sparkles: the big star draws, then the two glints flick in */ export function SparklesIcon({ className }: AnimatedIconProps) { return ( ); } /* mouse-pointer-click: cursor draws, then the click ticks paint out */ export function MousePointerClickIcon({ className }: AnimatedIconProps) { return ( ); } /* rocket: body draws, fins follow, exhaust flame paints last */ export function RocketIcon({ className }: AnimatedIconProps) { return ( ); } /* ------------------------------------------------------------------ */ /* Highlight */ /* ------------------------------------------------------------------ */ export interface HighlightProps extends Omit, "color"> { /** The word(s) that light up. */ children: React.ReactNode; /** One of the animated icon components (or any node) shown inline. */ icon: React.ReactNode; /** Accent color for the text + icon (any CSS color). */ color?: string; /** Icon side, relative to the text. */ iconPosition?: "before" | "after"; /** Image URL shown in a tooltip while the highlight is hovered / focused. */ image?: string; /** Alt text for the tooltip image. */ imageAlt?: string; /** Draw the icon once on mount instead of waiting for hover. */ autoPlay?: boolean; } export function Highlight({ children, icon, color, iconPosition = "before", image, imageAlt = "", autoPlay = false, className, ...props }: HighlightProps) { const reduce = useReducedMotion(); const [active, setActive] = React.useState(autoPlay); const tipId = React.useId(); const ref = React.useRef(null); /* the tooltip tracks the pointer along the word using LOCAL coordinates (offset from the highlight's own left edge) — no portal, no viewport math, so it can't drift when nested in a scaled / offset container */ const mvLeft = useMotionValue(0); const left = useSpring(mvLeft, { stiffness: 700, damping: 45, mass: 0.5 }); const pointTo = (clientX: number, snap = false) => { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; const lx = clientX - rect.left; mvLeft.set(lx); if (snap) left.jump(lx); }; const focusCenter = (snap = false) => { const rect = ref.current?.getBoundingClientRect(); if (rect) pointTo(rect.left + rect.width / 2, snap); }; const state: DrawState = !reduce && (autoPlay || active) ? "draw" : "rest"; /* keep the word as plain inline text so it shares the paragraph baseline; only the icon is inline-block + vertical-align nudged. spacing lives on the icon — no flex wrapper to distort alignment. */ const spacing = iconPosition === "before" ? "mr-[0.22em]" : "ml-[0.22em]"; const renderedIcon = React.isValidElement(icon) ? React.cloneElement(icon as React.ReactElement<{ className?: string }>, { className: cn( spacing, (icon.props as { className?: string }).className, ), }) : icon && ( {icon} ); /* marker-style highlight behind the word: accent tint when a color is set (inline, since the color is dynamic), otherwise a neutral token wash via hover/focus classes that reads in light and dark */ const style: React.CSSProperties = {}; if (color) { style.color = color; style.backgroundColor = active ? `${color}22` : "transparent"; } return ( { pointTo(e.clientX, true); setActive(true); }} onMouseMove={(e) => pointTo(e.clientX)} onMouseLeave={() => setActive(false)} onFocus={() => { focusCenter(true); setActive(true); }} onBlur={() => setActive(false)} {...props} > {iconPosition === "before" ? renderedIcon : null} {children} {iconPosition === "after" ? renderedIcon : null} {/* image tooltip — anchored above the word, tracking the cursor's x */} {image ? ( {active ? ( ) : null} ) : null} ); } /* ------------------------------------------------------------------ */ /* AnimatedHighlightText */ /* ------------------------------------------------------------------ */ export interface AnimatedHighlightTextProps extends React.HTMLAttributes { /** The paragraph — mix plain copy with nodes. */ children: React.ReactNode; /** Render as a different element (e.g. "h2", "div"). */ as?: React.ElementType; } /** * A typographic block that mixes plain copy with {@link Highlight} spans. * Each highlight carries an icon that redraws its own strokes on hover / focus. */ export default function AnimatedHighlightText({ children, as: Tag = "p", className, ...props }: AnimatedHighlightTextProps) { return ( {children} ); }