Split Text Button

"use client";

import * as React from "react";

export interface SplitTextButtonProps extends Omit<React.ComponentPropsWithoutRef<"button">, "children"> {
  /** Plain-text label. It is split into characters for the effect and kept intact for assistive technology. */
  children: string;
  /** Direction the characters travel on hover / focus. */
  direction?: "up" | "down";
  /** Delay between consecutive characters, in ms. */
  stagger?: number;
  /** Duration of each character's transition, in ms. */
  duration?: number;
  /** Any CSS easing, e.g. a cubic-bezier(). */
  easing?: string;
  /** Which end of the word starts moving first. */
  staggerFrom?: "start" | "center" | "end";
  /** Colour of the incoming line. */
  accent?: string;
  variant?: "ink" | "outline" | "ghost";
}

/** Stagger order for character `i` of `n`. */
function staggerIndex(i: number, n: number, from: "start" | "center" | "end") {
  if (from === "end") return n - 1 - i;
  if (from === "center") return Math.round(Math.abs(i - (n - 1) / 2));
  return i;
}

/**
 * A button whose label rolls character by character on hover or keyboard focus,
 * revealing a duplicate line. Pure CSS transitions — no animation library required.
 */
export const SplitTextButton = React.forwardRef<HTMLButtonElement, SplitTextButtonProps>(function SplitTextButton(
  {
    children,
    direction = "up",
    stagger = 24,
    duration = 450,
    easing = "cubic-bezier(0.16, 1, 0.3, 1)",
    staggerFrom = "start",
    accent = "#FF7448",
    variant = "ink",
    className = "",
    style,
    type = "button",
    ...props
  },
  ref,
) {
  const chars = Array.from(children);

  // Static class strings so Tailwind can see them.
  const travel =
    direction === "up"
      ? "group-hover:-translate-y-full group-focus-visible:-translate-y-full"
      : "group-hover:translate-y-full group-focus-visible:translate-y-full";
  const duplicatePosition = direction === "up" ? "top-full" : "bottom-full";

  const variantClass =
    variant === "ink"
      ? "rounded-full bg-zinc-950 px-7 text-white dark:bg-white dark:text-zinc-950"
      : variant === "outline"
        ? "rounded-full border border-zinc-900/15 px-7 text-zinc-900 hover:border-zinc-900/30 dark:border-white/15 dark:text-zinc-100 dark:hover:border-white/30"
        : "rounded-md px-2 text-zinc-900 dark:text-zinc-100";

  return (
    <button
      ref={ref}
      type={type}
      className={`group relative inline-flex h-12 select-none items-center justify-center text-sm font-medium tracking-tight transition-[border-color] duration-200 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--stb-accent)] disabled:pointer-events-none disabled:opacity-50 ${variantClass} ${className}`}
      style={{ ["--stb-accent" as string]: accent, ...style }}
      {...props}
    >
      {/* The accessible name is the untouched label. */}
      <span className="sr-only">{children}</span>

      <span aria-hidden="true" className="relative flex overflow-hidden whitespace-pre leading-[1.3]">
        {chars.map((char, i) => (
          <span
            key={i}
            className={`relative inline-block transition-transform will-change-transform motion-reduce:transition-none ${travel}`}
            style={{
              transitionDuration: `${duration}ms`,
              transitionTimingFunction: easing,
              transitionDelay: `${staggerIndex(i, chars.length, staggerFrom) * stagger}ms`,
            }}
          >
            {char}
            <span className={`absolute left-0 ${duplicatePosition} text-[var(--stb-accent)]`}>{char}</span>
          </span>
        ))}
      </span>

      {variant === "ghost" && (
        // Underline that draws in alongside the characters.
        <span
          aria-hidden="true"
          className="absolute inset-x-2 bottom-2.5 h-px origin-left scale-x-0 bg-[var(--stb-accent)] transition-transform group-hover:scale-x-100 group-focus-visible:scale-x-100 motion-reduce:transition-none"
          style={{ transitionDuration: `${duration + chars.length * stagger}ms`, transitionTimingFunction: easing }}
        />
      )}
    </button>
  );
});