Reveal text
Staggered word entrance for short headings and state changes.
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={