Outline Fill Text

npx shadcn@latest add https://www.motionkitui.com/r/outline-fill-text.json

npm install motion

"use client";

import { useRef, useState, type ElementType } from "react";
import { motion, useInView, useReducedMotion } from "motion/react";

type OutlineFillTextProps = {
  text: string;
  /** "hover" fills while the pointer or focus is on it; "view" fills once when it scrolls into view. */
  trigger?: "hover" | "view";
  /** Colour of the fill. */
  color?: string;
  /** Colour of the outline. */
  stroke?: string;
  /** Outline width in pixels. */
  strokeWidth?: number;
  /** Seconds for the fill to cross the word. */
  duration?: number;
  as?: ElementType;
  className?: string;
};

/**
 * A heading drawn as an outline that floods with solid colour from left to right, on hover or when it
 * comes into view, with a bright leading edge as the colour pours in.
 */
export function OutlineFillText({
  text,
  trigger = "hover",
  color = "#F6F1E8",
  stroke = "#5FAEB4",
  strokeWidth = 1.5,
  duration = 0.7,
  as: Tag = "h2",
  className = "",
}: OutlineFillTextProps) {
  const reduceMotion = useReducedMotion();
  const ref = useRef<HTMLSpanElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.6 });
  const [hovered, setHovered] = useState(false);
  const filled = reduceMotion || (trigger === "view" ? inView : hovered);

  return (
    <Tag
      className={`relative inline-block ${className}`}
      onPointerEnter={trigger === "hover" ? () => setHovered(true) : undefined}
      onPointerLeave={trigger === "hover" ? () => setHovered(false) : undefined}
    >
      {/* the outline is the real, readable text; the filled copy above it is decoration */}
      <span ref={ref} style={{ color: "transparent", WebkitTextStroke: `${strokeWidth}px ${stroke}` }}>
        {text}
      </span>
      <motion.span
        aria-hidden
        className="pointer-events-none absolute inset-0"
        style={{ color, WebkitTextStroke: `${strokeWidth}px ${color}` }}
        initial={false}
        animate={{ clipPath: filled ? "inset(0 0% 0 0)" : "inset(0 100% 0 0)" }}
        transition={{ duration: reduceMotion ? 0 : duration, ease: [0.65, 0, 0.35, 1] }}
      >
        {text}
      </motion.span>
    </Tag>
  );
}