Text Loop Demo

1"use client";
2 
3import { cn } from "@/lib/utils";
4import {
5  TextLoop,
6  type TextLoopProps,
7} from "@/components/sora-ui/texts/text-loop";
8 
9const PHRASES = ["Design fast.", "Ship faster.", "Iterate forever."];
10 
11export default function TextLoopExample({
12  interval = 2,
13  className = "font-medium text-2xl text-foreground",
14}: Pick<TextLoopProps, "interval" | "className">) {
15  return (
16    <div className="relative inline-grid">
17      {PHRASES.map((phrase) => (
18        <span
19          aria-hidden
20          className={cn(
21            className,
22            "invisible whitespace-nowrap [grid-area:1/1]"
23          )}
24          key={phrase}
25        >
26          {phrase}
27        </span>
28      ))}
29      <TextLoop
30        className={cn(className, "[grid-area:1/1]")}
31        interval={interval}
32      >
33        {PHRASES.map((phrase) => (
34          <span key={phrase}>{phrase}</span>
35        ))}
36      </TextLoop>
37    </div>
38  );
39}