Text Cursor Loop Demo

1"use client";
2 
3import { TextCursorLoop } from "@/components/sora-ui/texts/text-cursor-loop";
4 
5// Same hero line as the anime.js reference this primitive reimplements —
6// "A fast and flexible JavaScript library to animate [the web]." — the
7// cursor flashes the anime.js red only while collapsing/revealing, driven
8// by the `data-phase` attribute the primitive exposes for exactly this.
9const WORDS = [
10  "the web",
11  "HTML",
12  "WebGL",
13  "CSS",
14  "Canvas 2D",
15  "SVG",
16  "anything",
17];
18 
19export default function TextCursorLoopExample() {
20  return (
21    <p className="m-0 max-w-md text-balance text-lg leading-snug">
22      A fast and flexible JavaScript library to animate{" "}
23      <TextCursorLoop
24        className="font-medium"
25        classNames={{
26          cursor: "data-[phase=collapsing]:text-[#ff4b4b]",
27        }}
28        words={WORDS}
29      />
30    </p>
31  );
32}