Text Animate文字动效

"use client"

import * as React from "react"
import { motion, useInView } from "motion/react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import {
  flowToneStyle,
  type FlowToneName,
} from "@/components/ui/flow-diagram/tone"
import {
  useTextTuning,
  useTextMotion,
  useTextEntrance,
  segmentText,
  textStyles,
} from "./shared"
import { TextScramble } from "./text-scramble"
import { TextAnimateTuningContext } from "./shared"
export type { TextAnimateTuning, TextAnimateReport } from "./shared"

const textFlipVariants = cva("relative inline-grid max-w-full align-baseline", {
  variants: {
    variant: {
      pill: "rounded-lg border border-edge bg-(--flow-tone)/10 px-2.5 py-0.5 text-(--flow-tone)",
      underline: "border-b-2 border-(--flow-tone) px-1 text-(--flow-tone)",
    },
  },
  defaultVariants: { variant: "pill" },
})

function TextFlip({
  words,
  interval = 2600,
  variant,
  tone = "primary",
  paused = false,
  className,
  style,
  children,
  ...props
}: Omit<React.ComponentProps<"span">, "children"> &
  VariantProps<typeof textFlipVariants> & {
    words: string[]
    interval?: number
    /** 胶囊 / 下划线的色调，默认主题强调色。 */
    tone?: FlowToneName
    paused?: boolean
    /** 屏幕阅读器的完整替代文案。 */
    children?: string
  }) {
  const tuning = useTextTuning({ interval, paused, tone })
  interval = tuning.interval ?? interval
  paused = tuning.paused ?? paused
  tone = tuning.tone ?? tone
  const ref = React.useRef<HTMLSpanElement>(null)
  const measure = React.useRef<HTMLSpanElement>(null)
  const inView = useInView(ref, { amount: 0.2 })
  const reduced = useTextMotion()
  const [index, setIndex] = React.useState(0)
  const [width, setWidth] = React.useState<number>()
  const activeIndex = index % Math.max(1, words.length)
  const word = words[activeIndex] ?? ""

  React.useEffect(() => {
    if (paused || reduced || !inView || words.length < 2) return
    const timer = window.setInterval(
      () => {
        if (!document.hidden) setIndex((value) => value + 1)
      },
      Math.max(800, interval),
    )
    return () => window.clearInterval(timer)
  }, [paused, reduced, inView, interval, words.length])

  React.useEffect(() => {
    const element = measure.current
    if (!element) return
    const observer = new ResizeObserver(() =>
      setWidth(element.getBoundingClientRect().width),
    )
    observer.observe(element)
    return () => observer.disconnect()
  }, [word])

  return (
    <span
      {...props}
      ref={ref}
      data-slot="text-flip"
      data-interval={interval}
      data-paused={paused}
      data-tone={tone}
      className={cn(textFlipVariants({ variant }), className)}
      style={{ ...flowToneStyle(tone), ...style }}
    >
      <span className="sr-only">{children ?? words.join("、")}</span>
      <motion.span
        aria-hidden
        className="relative block overflow-hidden"
        animate={{ width: width ?? "auto" }}
        transition={{ duration: reduced ? 0 : 0.25 }}
      >
        <span
          ref={measure}
          className="pointer-events-none invisible absolute top-0 left-0 whitespace-nowrap"
        >
          {word}
        </span>
        <motion.span
          key={word}
          className="block whitespace-nowrap"
          initial={reduced ? false : { opacity: 0, y: ".4em", rotateX: -60 }}
          animate={{ opacity: 1, y: "0em", rotateX: 0 }}
          transition={{ duration: reduced ? 0 : 0.3 }}
        >
          {word}
        </motion.span>
      </motion.span>
    </span>
  )
}

function TextReveal({
  children,
  by = "char",
  trigger = "in-view",
  stagger = 35,
  locale = "zh-CN",
  className,
  ...props
}: Omit<React.ComponentProps<"span">, "children"> & {
  children: string
  by?: "char" | "word"
  trigger?: "mount" | "in-view"
  /** 相邻片段的延迟，毫秒。 */
  stagger?: number
  locale?: string
}) {
  const tuning = useTextTuning({ by, stagger })
  by = tuning.by ?? by
  stagger = tuning.stagger ?? stagger
  const { ref, active } = useTextEntrance(trigger)
  const parts = segmentText(children, by, locale, true)
  return (
    <span
      {...props}
      ref={ref}
      data-slot="text-reveal"
      data-by={by}
      data-stagger={stagger}
      data-active={active}
      className={cn("whitespace-pre-wrap", className)}
    >
      {textStyles()}
      <span className="sr-only">{children}</span>
      <span aria-hidden key={by + "-" + stagger}>
        {parts.map((part, index) => (
          <span
            key={index}
            data-slot="text-reveal-part"
            className={cn(!/^\s+$/.test(part) && "inline-block")}
            style={
              {
                "--text-delay": `${index * Math.max(0, stagger)}ms`,
              } as React.CSSProperties
            }
          >
            {part}
          </span>
        ))}
      </span>
    </span>
  )
}

const textHighlightVariants = cva("rounded-sm px-0.5", {
  variants: { variant: { block: "", underline: "rounded-none pb-0.5" } },
  defaultVariants: { variant: "block" },
})

function TextHighlight({
  children,
  tone = "primary",
  variant = "block",
  trigger = "in-view",
  className,
  style,
  ...props
}: React.ComponentProps<"span"> &
  VariantProps<typeof textHighlightVariants> & {
    tone?: FlowToneName
    trigger?: "mount" | "in-view"
  }) {
  const tuning = useTextTuning({ tone })
  tone = tuning.tone ?? tone
  const { ref, active } = useTextEntrance(trigger)
  return (
    <span
      {...props}
      ref={ref}
      data-slot="text-highlight"
      data-tone={tone}
      data-variant={variant}
      data-active={active}
      className={cn(textHighlightVariants({ variant }), className)}
      style={
        {
          ...flowToneStyle(tone),
          "--text-tone": "var(--flow-tone)",
          ...style,
        } as React.CSSProperties
      }
    >
      {textStyles()}
      {children}
    </span>
  )
}

export {
  TextAnimateTuningContext,
  TextFlip,
  TextReveal,
  TextScramble,
  TextHighlight,
  textFlipVariants,
  textHighlightVariants,
}

"use client"

import * as React from "react"
import { useInView } from "motion/react"

import { cn } from "@/lib/utils"
import { segmentText, textStyles, useTextMotion, useTextTuning } from "./shared"

const TEXT_CHARSETS = {
  latin: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  digits: "0123456789",
  symbols: "!<>_+?/[]{}=",
  katakana: "アイウエオカキクケコサシスセソタチツテト",
  chinese: "界面组件线条网格构建系统开源设计",
}
type TextScrambleCharset = keyof typeof TEXT_CHARSETS

function TextScramble({
  children,
  trigger = "in-view",
  charset = "latin",
  characters,
  duration = 1000,
  className,
  onMouseEnter,
  onFocus,
  ...props
}: Omit<React.ComponentProps<"span">, "children"> & {
  children: string
  trigger?: "mount" | "hover" | "in-view"
  charset?: TextScrambleCharset
  /** 覆盖预设字符集；空字符串回退为拉丁字母。 */
  characters?: string
  duration?: number
}) {
  const tuning = useTextTuning({ charset, duration })
  charset = tuning.charset ?? charset
  duration = tuning.duration ?? duration
  // 面板明确选择预设时覆盖示例的自定义字符池。
  if (tuning.charset !== undefined) characters = undefined
  const ref = React.useRef<HTMLSpanElement>(null)
  const inView = useInView(ref, { once: true, amount: 0.2 })
  const reduced = useTextMotion()
  const [run, setRun] = React.useState(0)
  const [frame, setFrame] = React.useState<number | null>(null)
  const parts = segmentText(children, "char")
  const pool = Array.from(characters || TEXT_CHARSETS[charset])
  const active =
    !reduced &&
    (trigger === "mount" ||
      (trigger === "in-view" && inView) ||
      (trigger === "hover" && run > 0))

  React.useEffect(() => {
    if (!active) return
    const start = performance.now()
    const length = segmentText(children, "char").length
    const totalFrames = Math.max(1, length + 8)
    const timer = window.setInterval(() => {
      const progress = (performance.now() - start) / Math.max(100, duration)
      setFrame(progress >= 1 ? null : Math.floor(progress * totalFrames))
      if (progress >= 1) window.clearInterval(timer)
    }, 40)
    return () => window.clearInterval(timer)
  }, [active, run, children, duration, charset, characters])

  return (
    <span
      {...props}
      ref={ref}
      data-slot="text-scramble"
      data-duration={duration}
      data-charset={charset}
      tabIndex={trigger === "hover" ? 0 : props.tabIndex}
      className={cn(
        "font-mono whitespace-pre-wrap outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
        className,
      )}
      onMouseEnter={(event) => {
        onMouseEnter?.(event)
        if (trigger === "hover") setRun((value) => value + 1)
      }}
      onFocus={(event) => {
        onFocus?.(event)
        if (trigger === "hover") setRun((value) => value + 1)
      }}
    >
      {textStyles()}
      <span className="sr-only">{children}</span>
      <span aria-hidden>
        {parts.map((part, index) => {
          const scrambling =
            active &&
            frame !== null &&
            index >= frame - 8 &&
            !/^\s+$/.test(part)
          return (
            <span key={index} className="relative inline-block">
              <span
                data-slot="text-scramble-final"
                className={cn(scrambling && "invisible")}
              >
                {part}
              </span>
              {scrambling ? (
                <span
                  data-slot="text-scramble-noise"
                  className="absolute inset-0 text-center"
                >
                  {pool[(index * 7 + frame * 11) % pool.length]}
                </span>
              ) : null}
            </span>
          )
        })}
      </span>
    </span>
  )
}

export { TextScramble }
export type { TextScrambleCharset }

"use client"

import * as React from "react"
import { useInView } from "motion/react"

import type { FlowToneName } from "@/components/ui/flow-diagram/tone"

import type { TextScrambleCharset } from "./text-scramble"

/** 各文字原语回报自己负责的属性，同一子树按属性保留第一个示例值。 */
type TextAnimateReport = Partial<{
  interval: number
  paused: boolean
  by: "char" | "word"
  stagger: number
  duration: number
  // 用顶层 import type：shadcn CLI 安装时只改写静态 import 的路径，内联 import() 类型里的别名不会被改写
  charset: TextScrambleCharset
  tone: FlowToneName
}>
type TextAnimateTuning = TextAnimateReport & {
  /** 回报覆盖前的示例取值。 */
  onReport?: (report: TextAnimateReport) => void
}
const TextAnimateTuningContext = React.createContext<TextAnimateTuning>({})
const reports = new WeakMap<
  NonNullable<TextAnimateTuning["onReport"]>,
  TextAnimateReport
>()

function useTextTuning(report: TextAnimateReport) {
  const tuning = React.useContext(TextAnimateTuningContext)
  const { onReport } = tuning
  // 效果按原语的属性订阅；不因 Provider 的新对象重复回报。
  const { interval, paused, by, stagger, duration, charset, tone } = report
  React.useEffect(() => {
    if (!onReport) return
    const previous = reports.get(onReport)
    const next = Object.fromEntries(
      Object.entries({
        interval,
        paused,
        by,
        stagger,
        duration,
        charset,
        tone,
      }).filter(([, value]) => value !== undefined),
    )
    reports.set(onReport, { ...next, ...previous })
    if (!previous) {
      // 等四种原语的 effect 都执行后再汇总，兼容面板只接收首次回报。
      queueMicrotask(() => {
        const collected = reports.get(onReport) ?? {}
        reports.delete(onReport)
        onReport(collected)
      })
    }
  }, [onReport, interval, paused, by, stagger, duration, charset, tone])
  return tuning
}

function subscribe(callback: () => void) {
  const media = window.matchMedia("(prefers-reduced-motion: reduce)")
  media.addEventListener("change", callback)
  return () => media.removeEventListener("change", callback)
}
function snapshot() {
  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
}
function serverSnapshot() {
  return true
}
function useTextMotion() {
  return React.useSyncExternalStore(subscribe, snapshot, serverSnapshot)
}

function useTextEntrance(trigger: "mount" | "in-view") {
  const ref = React.useRef<HTMLSpanElement>(null)
  const inView = useInView(ref, { once: true, amount: 0.2 })
  const reduced = useTextMotion()
  return { ref, active: !reduced && (trigger === "mount" || inView), reduced }
}

// 不能出现在行首的标点：每个片段都是 inline-block，浏览器的禁则不再生效，
// 所以把它们并进前一个片段，避免「。」孤零零掉到下一行
const NO_LINE_START = /^[，。、；：！？）」』》”’…·.,;:!?)\]}]+$/u

function segmentText(
  text: string,
  by: "char" | "word",
  locale = "zh-CN",
  /** 把行首禁则标点并进前一个片段，只有每个片段都是 inline-block 时才需要 */
  glue = false,
) {
  const parts: string[] = []
  for (const { segment } of new Intl.Segmenter(locale, {
    granularity: by === "char" ? "grapheme" : "word",
  }).segment(text)) {
    if (glue && parts.length && NO_LINE_START.test(segment)) {
      parts[parts.length - 1] += segment
    } else {
      parts.push(segment)
    }
  }
  return parts
}

const TEXT_CSS = `
@keyframes tv-text-reveal { from { opacity:0; filter:blur(6px); transform:translateY(.35em) } to { opacity:1; filter:blur(0); transform:translateY(0) } }
@keyframes tv-text-sweep { from { background-size:0% 100% } to { background-size:100% 100% } }
@media(prefers-reduced-motion:no-preference) {
 [data-slot="text-reveal"][data-active="true"] [data-slot="text-reveal-part"] { animation:tv-text-reveal .5s both; animation-delay:var(--text-delay) }
 [data-slot="text-highlight"][data-active="true"] { animation:tv-text-sweep .65s both }
}
[data-slot="text-highlight"] { background-image:linear-gradient(color-mix(in oklch,var(--text-tone) 22%,transparent),color-mix(in oklch,var(--text-tone) 22%,transparent)); background-repeat:no-repeat; background-position:0 100%; box-decoration-break:clone; -webkit-box-decoration-break:clone }
[data-slot="text-highlight"][data-variant="underline"] { background-image:linear-gradient(var(--text-tone),var(--text-tone)); background-origin:content-box; background-size:100% .09em }
@keyframes tv-text-underline { from { background-size:0% .09em } to { background-size:100% .09em } }
@media(prefers-reduced-motion:no-preference) { [data-slot="text-highlight"][data-active="true"][data-variant="underline"] { animation-name:tv-text-underline } }
@media(prefers-reduced-motion:reduce) {
 [data-slot="text-scramble-final"] { visibility:visible!important }
 [data-slot="text-scramble-noise"] { display:none }
}`

function textStyles() {
  return React.createElement(
    "style",
    { href: "travinsy-text-animate", precedence: "default" },
    TEXT_CSS,
  )
}

export {
  TextAnimateTuningContext,
  useTextTuning,
  useTextMotion,
  useTextEntrance,
  segmentText,
  textStyles,
}

export type { TextAnimateTuning, TextAnimateReport }