Word cycle

1"use client";2 3import { useEffect, useState } from "react";4import type { CSSProperties, HTMLAttributes } from "react";5 6export type WordCycleProps = Omit<7  HTMLAttributes<HTMLSpanElement>,8  "children"9> & {10  /** Words to rotate through, in order. */11  words: string[];12  /** Milliseconds each word stays before the next swap. */13  interval?: number;14};15 16/**17 * A word that rotates on an interval, its characters blurring in one at a18 * time. The outgoing word blurs up and away underneath. Rotation pauses19 * while the document is hidden; reduced motion swaps the word instantly.20 */21export function WordCycle({22  words,23  interval = 2400,24  className = "",25  ...props26}: WordCycleProps) {27  const [index, setIndex] = useState(0);28  const count = words.length;