Skip to component
GGamma

Reveal text

Staggered word entrance for short headings and state changes.

New

Live previewUse keyboard to interact

Implementation

1import type { CSSProperties, ElementType } from "react";2 3export type RevealTextProps = {4  text: string;5  as?: ElementType;6  delay?: number;7  stagger?: number;8  className?: string;9};10 11/** Word entrance for short headings. Remount with a new key to replay. */12export function RevealText({13  text,14  as: Tag = "span",15  delay = 0,16  stagger = 65,17  className = "",18}: RevealTextProps) {19  return (20    <Tag className={`gamma-reveal ${className}`} aria-label={text}>21      {text.split(/\s+/).map((word, index) => (22        <span23          className="gamma-reveal-word"24          aria-hidden="true"25          key={`${word}-${index}`}26        >27          <span28            style={