Fluid Text

---
import FluidText from '@/components/demos/fluid-text/FluidText.astro'
---

<FluidText text="Fluid Text" tag="h1" />

import FluidText from './FluidText'

export default function Hero() {
  return <FluidText text="Fluid Text" as="h1" hoverColor="#ff6000" />
}

/** @jsxImportSource react */
import { createElement, useEffect, useId, useMemo, useRef } from 'react'
import type { CSSProperties, ElementType } from 'react'

/**
 * Fluid Text — React
 *
 * Text that reacts to the pointer: characters near the cursor stretch, thicken,
 * and push their neighbours aside, then settle back on a spring.
 *
 * Drop this file into any React project. The only import is React itself — no
 * motion library, no stylesheet, no build step.
 *
 * @author Arsyad CC Fadly
 * x.com/arsycc | arsyad.cc
 * @version 2.0.0
 */

export type FluidTextProps = {
  /** Text to render. `\n` starts a new line. */
  text: string
  /** Element to render. Defaults to `p`. */
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div'
  /** Base colour. Any CSS colour, including a custom property. */
  color?: string
  /** Colour at full intensity. Omit to keep a single colour. */
  hoverColor?: string
  /** Horizontal scale at full intensity. */
  scaleX?: number
  /** Vertical scale at full intensity. */
  scaleY?: number
  /** Radius of influence, in pixels. */
  range?: number
  /** Space opened around an active character, in em. */
  padding?: number
  /** Outline thickness at full intensity, in em. */
  strokeWidth?: number
  /** Fuse neighbouring characters together with an SVG filter. */
  threshold?: boolean
  /** Alpha cutoff for the threshold filter. Higher snaps harder. */
  thresholdIntensity?: number
  stiffness?: number
  damping?: number
  mass?: number
  /** Allow the text to be selected. */
  userSelect?: boolean
  className?: string
  style?: CSSProperties
}

type Options = Required<
  Pick<
    FluidTextProps,
    | 'color'
    | 'scaleX'
    | 'scaleY'
    | 'range'
    | 'padding'
    | 'strokeWidth'
    | 'threshold'
    | 'thresholdIntensity'
    | 'stiffness'
    | 'damping'
    | 'mass'
  >
> & { hoverColor?: string }

type Char = {
  el: HTMLElement
  s: number
  v: number
  cx: number
  cy: number
  lastTransform: string
  lastStroke: string
  lastColor: string
}

type Instance = {
  root: HTMLElement
  lines: Char[][]
  chars: Char[]
  options: { current: Options }
  blur: SVGElement | null
  matrix: SVGElement | null
  ts: number
  tv: number
}

/* ------------------------------------------------------------------ engine */
/* One pointer listener and one animation loop are shared by every instance on
   the page. Measuring a character's position is what costs — reading a rect
   forces the browser to flush layout — so rest positions are measured once and
   re-measured only when the line could have moved. */

const instances = new Set<Instance>()
const client = { x: NaN, y: NaN }
const pointer = { x: NaN, y: NaN }

let rafId: number | null = null
let lastTime = 0
let listening = false
let resizeTimer: ReturnType<typeof setTimeout> | undefined

function schedule() {
  if (rafId == null) rafId = requestAnimationFrame(frame)
}

function syncPointer() {
  if (Number.isNaN(client.x)) {
    pointer.x = NaN
    pointer.y = NaN
    return
  }
  pointer.x = client.x + window.scrollX
  pointer.y = client.y + window.scrollY
}

function onPointerMove(event: PointerEvent) {
  if (event.pointerType === 'touch') return
  client.x = event.clientX
  client.y = event.clientY
  syncPointer()
  schedule()
}

function onPointerLeave() {
  client.x = NaN
  client.y = NaN
  syncPointer()
  schedule()
}

function onScroll() {
  if (Number.isNaN(client.x)) return
  syncPointer()
  schedule()
}

function onResize() {
  clearTimeout(resizeTimer)
  resizeTimer = setTimeout(() => {
    instances.forEach(measure)
    schedule()
  }, 150)
}

function startListening() {
  if (listening) return
  listening = true
  window.addEventListener('pointermove', onPointerMove, { passive: true })
  document.addEventListener('pointerleave', onPointerLeave, { passive: true })
  window.addEventListener('scroll', onScroll, { passive: true })
  window.addEventListener('resize', onResize, { passive: true })
}

function stopListening() {
  if (!listening || instances.size > 0) return
  listening = false
  window.removeEventListener('pointermove', onPointerMove)
  document.removeEventListener('pointerleave', onPointerLeave)
  window.removeEventListener('scroll', onScroll)
  window.removeEventListener('resize', onResize)
}

function measure(inst: Instance) {
  for (const ch of inst.chars) {
    ch.s = 0
    ch.v = 0
    ch.lastTransform = ''
    ch.el.style.transform = ''
  }

  const scrollX = window.scrollX
  const scrollY = window.scrollY

  for (const ch of inst.chars) {
    const rect = ch.el.getBoundingClientRect()
    ch.cx = rect.left + scrollX + rect.width / 2
    ch.cy = rect.top + scrollY + rect.height / 2
  }
}

function integrate(value: number, velocity: number, target: number, o: Options, dt: number) {
  const steps = Math.max(1, Math.ceil(dt / (1 / 120)))
  const h = dt / steps
  let s = value
  let v = velocity
  for (let i = 0; i < steps; i++) {
    const a = (-o.stiffness * (s - target) - o.damping * v) / o.mass
    v += a * h
    s += v * h
  }
  return [s, v] as const
}

function step(inst: Instance, dt: number) {
  const o = inst.options.current
  const hasPointer = !Number.isNaN(pointer.x)
  let alive = false
  let peak = 0

  for (const ch of inst.chars) {
    let target = 0
    if (hasPointer) {
      const distance = Math.hypot(ch.cx - pointer.x, ch.cy - pointer.y)
      if (distance < o.range) target = 1 - distance / o.range
    }
    if (target > peak) peak = target

    const [s, v] = integrate(ch.s, ch.v, target, o, dt)
    ch.s = s < 0 ? 0 : s > 1 ? 1 : s
    ch.v = v

    if (Math.abs(ch.s - target) > 1e-4 || Math.abs(ch.v) > 1e-4) alive = true
  }

  // Spacing is a translate, not padding. Padding would reflow the whole line
  // every frame; a transform never touches layout. Each character carries the
  // running total of the room its predecessors opened up, plus half its own.
  for (const line of inst.lines) {
    let acc = 0
    for (const ch of line) {
      const pad = o.padding * ch.s
      const tx = acc + pad
      acc += pad * 2

      const sx = 1 + ch.s * (o.scaleX - 1)
      const sy = 1 + ch.s * (o.scaleY - 1)
      const transform = `translateX(${tx.toFixed(4)}em) scaleX(${sx.toFixed(4)}) scaleY(${sy.toFixed(4)})`
      if (transform !== ch.lastTransform) {
        ch.el.style.transform = transform
        ch.lastTransform = transform
      }

      const stroke = `${(ch.s * o.strokeWidth).toFixed(4)}em`
      if (stroke !== ch.lastStroke) {
        ch.el.style.webkitTextStrokeWidth = stroke
        ch.lastStroke = stroke
      }

      // Mixed in CSS rather than JavaScript so a custom property in either
      // colour keeps resolving — a theme switch updates the text on its own.
      if (o.hoverColor) {
        const color = `color-mix(in oklab, ${o.hoverColor} ${(ch.s * 100).toFixed(2)}%, ${o.color})`
        if (color !== ch.lastColor) {
          ch.el.style.color = color
          ch.lastColor = color
        }
      }
    }
  }

  if (inst.blur && inst.matrix && o.threshold) {
    const [ts, tv] = integrate(inst.ts, inst.tv, peak, { ...o, stiffness: 150, damping: 25, mass: 1 }, dt)
    inst.ts = ts < 0 ? 0 : ts > 1 ? 1 : ts
    inst.tv = tv
    if (Math.abs(inst.ts - peak) > 1e-4 || Math.abs(inst.tv) > 1e-4) alive = true

    inst.blur.setAttribute('stdDeviation', (0.5 + 2.5 * inst.ts).toFixed(3))
    const cutoff = 50 + (o.thresholdIntensity - 50) * inst.ts
    inst.matrix.setAttribute('values', `1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 255 -${cutoff.toFixed(2)}`)
  }

  return alive
}

function frame(now: number) {
  rafId = null
  const dt = lastTime ? Math.min((now - lastTime) / 1000, 1 / 20) : 1 / 60
  lastTime = now

  let alive = false
  for (const inst of instances) {
    if (step(inst, dt)) alive = true
  }

  if (alive) schedule()
  else lastTime = 0
}

/* --------------------------------------------------------------- component */

const DEFAULTS = {
  as: 'p',
  color: 'currentColor',
  scaleX: 1.3,
  scaleY: 0.94,
  range: 120,
  padding: 0.08,
  strokeWidth: 0.12,
  threshold: false,
  thresholdIntensity: 100,
  stiffness: 600,
  damping: 50,
  mass: 1,
  userSelect: false
} as const

export default function FluidText({
  text,
  as = DEFAULTS.as,
  color = DEFAULTS.color,
  hoverColor,
  scaleX = DEFAULTS.scaleX,
  scaleY = DEFAULTS.scaleY,
  range = DEFAULTS.range,
  padding = DEFAULTS.padding,
  strokeWidth = DEFAULTS.strokeWidth,
  threshold = DEFAULTS.threshold,
  thresholdIntensity = DEFAULTS.thresholdIntensity,
  stiffness = DEFAULTS.stiffness,
  damping = DEFAULTS.damping,
  mass = DEFAULTS.mass,
  userSelect = DEFAULTS.userSelect,
  className,
  style
}: FluidTextProps) {
  const rootRef = useRef<HTMLElement | null>(null)

  // The filter is referenced by id, so two instances on one page must not share
  // one. useId is unique per component instance; the colons it contains are not
  // valid in a CSS selector, so they come out.
  const filterId = `fluid-text-${useId().replace(/[^a-zA-Z0-9-]/g, '')}`

  // Read live on every frame, so changing a prop takes effect without
  // tearing the instance down and re-measuring.
  const options = useRef<Options>({
    color,
    hoverColor,
    scaleX,
    scaleY,
    range,
    padding,
    strokeWidth,
    threshold,
    thresholdIntensity,
    stiffness,
    damping,
    mass
  })
  options.current = {
    color,
    hoverColor,
    scaleX,
    scaleY,
    range,
    padding,
    strokeWidth,
    threshold,
    thresholdIntensity,
    stiffness,
    damping,
    mass
  }

  const structure = useMemo(
    () =>
      text.split('\n').map((line) =>
        line
          .split(/(\s+)/)
          .filter((token) => token.length > 0)
          .map((token) => Array.from(token))
      ),
    [text]
  )

  useEffect(() => {
    const root = rootRef.current
    if (!root) return
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return

    const lineEls = Array.from(root.querySelectorAll<HTMLElement>('[data-ft-line]'))
    const lines = lineEls.map((lineEl) =>
      Array.from(lineEl.querySelectorAll<HTMLElement>('[data-ft-char]')).map((el) => ({
        el,
        s: 0,
        v: 0,
        cx: 0,
        cy: 0,
        lastTransform: '',
        lastStroke: '',
        lastColor: ''
      }))
    )
    const chars = lines.flat()
    if (chars.length === 0) return

    const filter = root.querySelector(`#${CSS.escape(filterId)}`)

    const inst: Instance = {
      root,
      lines,
      chars,
      options,
      blur: filter ? filter.querySelector('feGaussianBlur') : null,
      matrix: filter ? filter.querySelector('feColorMatrix') : null,
      ts: 0,
      tv: 0
    }

    instances.add(inst)
    measure(inst)
    startListening()

    let cancelled = false
    if (document.fonts && document.fonts.status !== 'loaded') {
      document.fonts.ready.then(() => {
        if (cancelled) return
        measure(inst)
        schedule()
      })
    }

    return () => {
      cancelled = true
      instances.delete(inst)
      stopListening()
    }
  }, [structure, filterId])

  const Tag = as as ElementType

  return createElement(
    Tag,
    {
      ref: rootRef,
      'aria-label': text,
      className,
      style: {
        position: 'relative',
        margin: 0,
        lineHeight: 1.1,
        cursor: 'default',
        color,
        userSelect: userSelect ? 'auto' : 'none',
        ...style
      } as CSSProperties
    },
    // One element per character is what the effect needs, which would otherwise
    // make a screen reader spell the sentence out. The label above carries the
    // real string and the nest below is hidden from assistive technology.
    <span aria-hidden="true" style={{ display: 'block', filter: threshold ? `url(#${filterId})` : undefined }}>
      {structure.map((line, lineIndex) => (
        <span key={lineIndex} data-ft-line style={{ display: 'block' }}>
          {line.map((word, wordIndex) => (
            <span key={wordIndex} style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
              {word.map((character, charIndex) => (
                <span
                  key={charIndex}
                  data-ft-char
                  style={{ display: 'inline-block', whiteSpace: 'pre', WebkitTextStrokeColor: 'currentColor' }}
                >
                  {character}
                </span>
              ))}
            </span>
          ))}
        </span>
      ))}
    </span>,
    threshold ? (
      <svg
        key="defs"
        aria-hidden="true"
        focusable="false"
        style={{ position: 'absolute', width: 0, height: 0, visibility: 'hidden', pointerEvents: 'none' }}
      >
        <defs>
          <filter id={filterId}>
            <feGaussianBlur in="SourceGraphic" stdDeviation="0.5" result="ft-blur" />
            <feColorMatrix in="ft-blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 255 -50" />
          </filter>
        </defs>
      </svg>
    ) : null
  )
}