波浪文字

// components/ui/squiggly-text.tsx
"use client";

import React, { useId } from "react";
import { motion, useTime, useTransform } from "motion/react";
import { cn } from "@/lib/utils";

export interface SquigglyTextProps {
  /**
   * 要应用波浪效果的文本（或任意节点）。
   */
  children: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
  /**
   * 要循环播放的不同位移帧数量。
   * 数值越高 = 摆动越平滑，但 DOM 中的 SVG 滤镜越多。
   * @default 5
   */
  steps?: number;
  /**
   * 滤镜切换间隔，单位为毫秒。
   * 数值越低 = 越急促；数值越高 = 波动越舒缓。
   * @default 80
   */
  stepDuration?: number;
  /**
   * 最大位移，单位为 px。数值越大 = 波浪效果越明显。
   * 传入单个数字可使用固定缩放值，也可传入元组，在每个步骤中
   * 交替使用两个值（与原始 Lucas Bebber 演示一致）。
   * @default [6, 8]
   */
  scale?: number | [number, number];
  /**
   * 湍流基础频率。较低的值会产生更长、更平滑的波浪；
   * 较高的值会产生更紧密、更抖动的噪声。
   * @default 0.02
   */
  baseFrequency?: number;
  /**
   * 湍流倍频程数量。数值越高 = 噪声细节越丰富。
   * @default 3
   */
  numOctaves?: number;
  /**
   * 将包装器渲染为此元素类型。
   * @default "span"
   */
  as?: "span" | "div";
}

export function SquigglyText({
  children,
  steps = 5,
  stepDuration = 80,
  scale = [6, 8],
  baseFrequency = 0.02,
  numOctaves = 3,
  as = "span",
  className,
  style,
}: SquigglyTextProps) {
  const reactId = useId();
  // useId 可能生成 ":" / "_"，它们在 CSS url(#…) 引用中无效。
  const safeId = reactId.replace(/[:_]/g, "");
  const filterId = (i: number) => `squiggly-${safeId}-${i}`;

  const filters = React.useMemo(
    () => Array.from({ length: steps }, (_, i) => `url(#${filterId(i)})`),
    // filterId 在每次渲染中保持稳定
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [steps, safeId],
  );

  const time = useTime();
  const filter = useTransform(
    time,
    (t) => filters[Math.floor(t / stepDuration) % filters.length],
  );

  const scaleAt = (i: number) =>
    Array.isArray(scale) ? scale[i % scale.length] : scale;

  const Wrapper = as === "div" ? motion.div : motion.span;

  return (
    <Wrapper
      style={{ filter, ...style }}
      className={cn("inline-block", className)}
    >
      <svg
        aria-hidden
        className="pointer-events-none absolute h-0 w-0 overflow-hidden"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          {Array.from({ length: steps }).map((_, i) => (
            <filter id={filterId(i)} key={i}>
              <feTurbulence
                baseFrequency={baseFrequency}
                numOctaves={numOctaves}
                result="noise"
                seed={i}
              />
              <feDisplacementMap
                in="SourceGraphic"
                in2="noise"
                scale={scaleAt(i)}
              />
            </filter>
          ))}
        </defs>
      </svg>
      {children}
    </Wrapper>
  );
}