Reveal

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef, useState } from "react";4 5/**6 * Text rising into place line by line, masked behind its own baseline.7 *8 * Lines are found by measuring, not by guessing. The text is split into words,9 * each word's offsetTop is read once, and words sharing a top are a line —10 * so the reveal follows the ACTUAL wrap at the actual viewport width and font11 * size. Splitting on a character count, or on explicit line breaks, misaligns12 * the moment anything reflows: a responsive heading rewraps and the animation13 * suddenly cuts mid-phrase.14 *15 * Each line sits in a clipping wrapper, so it rises from behind a hard edge16 * rather than fading in. That mask is what makes the effect read as17 * typographic rather than as a generic fade-up.18 *19 * The whole string stays in the accessibility tree as a single node: the split20 * wrappers are aria-hidden and an sr-only copy carries the real text.21 * Splitting text into per-word spans without this makes some screen readers22 * announce it one word at a time, with a pause between each.23 */24 25export interface RevealProps {26  children: string;27  /** Seconds between consecutive lines. */28  stagger?: number;29  /** Seconds for one line's travel. */30  duration?: number;31  /** How far each line travels, as a fraction of its own height. */32  distance?: number;33  /** Fires once when this share of the block is in view. */34  threshold?: number;35  as?: "h1" | "h2" | "h3" | "p" | "span";36  still?: boolean;37  className?: string;38}39 40export function Reveal({41  children,42  stagger = 0.08,43  duration = 0.9,44  distance = 1,45  threshold = 0.3,46  as: Tag = "p",47  still = false,48  className = "",49}: RevealProps) {50  const hostRef = useRef<HTMLDivElement>(null);51  const [lines, setLines] = useState<string[] | null>(null);52  const [shown, setShown] = useState(false);53 54  const reduced =55    still ||56    (typeof window !== "undefined" &&57      typeof matchMedia === "function" &&58      matchMedia("(prefers-reduced-motion: reduce)").matches);59 60  /**61   * Measure the real wrap: render the words, read their offsets, group by top.62   * Re-runs on resize, because the wrap changes with the container.63   */64  useEffect(() => {65    if (reduced) return;66    const host = hostRef.current;67    if (!host) return;68 69    const measure = () => {70      const probe = document.createElement("div");71      // Inherits every typographic property that affects wrapping, so the72      // measurement matches what will actually render.73      probe.style.cssText =74        "position:absolute;visibility:hidden;pointer-events:none;white-space:normal;";75      probe.style.width = `${host.clientWidth}px`;76      probe.style.font = getComputedStyle(host).font;77      probe.style.letterSpacing = getComputedStyle(host).letterSpacing;78 79      const words = children.split(/\s+/).filter(Boolean);80      probe.innerHTML = words.map((w) => `<span>${w}</span>`).join(" ");81      host.appendChild(probe);82 83      const grouped: string[] = [];84      let currentTop: number | null = null;85 86      probe.querySelectorAll("span").forEach((span, i) => {87        const top = (span as HTMLElement).offsetTop;88        if (currentTop === null || top !== currentTop) {89          currentTop = top;90          grouped.push(words[i]);91        } else {92          grouped[grouped.length - 1] += ` ${words[i]}`;93        }94      });95 96      host.removeChild(probe);97 98      const next = grouped.length ? grouped : [children];99      // Only commit when the wrap actually changed. Setting a fresh array100      // every time re-renders, which can resize the host, which fires the101      // ResizeObserver below, which measures again — a loop that never102      // settles and leaves the reveal permanently mid-flight.103      setLines((current) =>104        current &&105        current.length === next.length &&106        current.every((line, i) => line === next[i])107          ? current108          : next,109      );110    };111 112    // Deferred a frame so fonts and layout have settled — measuring during113    // the same commit gives the fallback font's wrap, which is wrong.114    const id = requestAnimationFrame(measure);115    const observer = new ResizeObserver(() => requestAnimationFrame(measure));116    observer.observe(host);117    document.fonts?.ready.then(measure).catch(() => {});118 119    return () => {120      cancelAnimationFrame(id);121      observer.disconnect();122    };123  }, [children, reduced]);124 125  useEffect(() => {126    if (reduced) return;127    const host = hostRef.current;128    if (!host) return;129 130    const observer = new IntersectionObserver(131      ([entry]) => {132        if (!entry.isIntersecting) return;133        setShown(true);134        // Once revealed it stays revealed; replaying on every scroll past135        // turns a flourish into a distraction.136        observer.disconnect();137      },138      { threshold },139    );140    observer.observe(host);141 142    /**143     * Direct fallback, because the observer alone is not enough.144     *145     * IntersectionObserver reports nothing while the document is hidden — a146     * background tab, a prerender, or an embedded view. Text placed above the147     * fold then stays invisible until the tab is focused AND something moves,148     * which presents as "the reveal just does not run". Measuring the rect149     * once covers the case the observer structurally cannot.150     *151     * A timeout, deliberately, not requestAnimationFrame: rAF does not fire152     * at all in a hidden document, which is precisely the situation this153     * exists to rescue.154     */155    const id = window.setTimeout(() => {156      const box = host.getBoundingClientRect();157      const visible =158        Math.min(box.bottom, window.innerHeight) - Math.max(box.top, 0);159      if (box.height > 0 && visible / box.height >= Math.min(threshold, 0.99)) {160        setShown(true);161        observer.disconnect();162      }163    }, 0);164 165    return () => {166      window.clearTimeout(id);167      observer.disconnect();168    };169  }, [threshold, reduced]);170 171  if (reduced) {172    return <Tag className={className}>{children}</Tag>;173  }174 175  return (176    <Tag className={className}>177      {/* The real string, announced once, and what select-and-copy yields. */}178      <span className="sr-only">{children}</span>179 180      <div ref={hostRef} aria-hidden>181        {lines === null ? (182          // Pre-measurement: render the text invisibly so the block already183          // occupies its final height and nothing below it jumps when the184          // lines appear.185          <span style={{ opacity: 0 }}>{children}</span>186        ) : (187          lines.map((line, i) => (188            <span key={`${line}-${i}`} className="block overflow-hidden">189              <span190                className="block will-change-transform"191                style={{192                  transform: shown193                    ? "translateY(0)"194                    : `translateY(${distance * 100}%)`,195                  opacity: shown ? 1 : 0,196                  transition: `transform ${duration}s cubic-bezier(0.16,1,0.3,1) ${i * stagger}s, opacity ${duration * 0.6}s linear ${i * stagger}s`,197                }}198              >199                {line}200              </span>201            </span>202          ))203        )}204      </div>205    </Tag>206  );207}208