Word Background

import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface WordBackgroundProps {
  children?: ReactNode;
  word?: string;
  /** Seconds per loop (0 = static). */
  speed?: number;
  className?: string;
}

/** A giant outlined word (hairline stroke, no fill) slowly drifting sideways behind content in an endless loop — typographic texture instead of imagery. Pure CSS. */
export function WordBackground({ children, word = "Frame — Frame — ", speed = 60, className }: WordBackgroundProps) {
  const text = (
    <span className="shrink-0 pr-[0.3em] font-da-display text-[clamp(8rem,28vw,22rem)] leading-none font-semibold tracking-da-display whitespace-nowrap text-transparent [-webkit-text-stroke:1px_var(--da-border-strong)] opacity-25">
      {word}
    </span>
  );
  return (
    <div className={cn("relative isolate overflow-hidden bg-da-bg text-da-fg", className)}>
      <div aria-hidden className="absolute inset-0 -z-10 flex items-center">
        <div className="mc-word flex" style={speed ? { animationDuration: `${speed}s` } : { animation: "none" }}>
          {text}
          {text}
        </div>
      </div>
      {children}
      <style href="mc-word" precedence="default">{`
        @keyframes mc-word { to { translate: -50% 0 } }
        .mc-word { animation: mc-word 60s linear infinite }
        @media (prefers-reduced-motion: reduce) { .mc-word { animation: none } }
      `}</style>
    </div>
  );
}

export default WordBackground;