Stagger Hover Text

1import type { ReactNode } from "react";
2import { StaggeredHoverText } from "@/registry/ui/stagger-hover-text";
3
4const DEMOS: Array<{
5  label: string;
6  demo: ReactNode;
7}> = [
8  {
9    label: "Default - hover the text itself",
10    demo: (
11      <StaggeredHoverText
12        text="Hover me and watch the wave"
13        selfHover
14        className="cursor-default"
15      />
16    ),
17  },
18  {
19    label: "Slower stagger - delayStepMs={60}",
20    demo: (
21      <StaggeredHoverText
22        text="A slower, more dramatic sweep"
23        delayStepMs={60}
24        selfHover
25        className="cursor-default"
26      />
27    ),
28  },
29  {
30    label: "Stroke mode - outline text fills on hover",
31    demo: (
32      <StaggeredHoverText
33        text="Outlined until you hover"
34        charClassName="stagger-char-stroke"
35        selfHover
36        className="cursor-default"
37      />
38    ),
39  },
40  {
41    label: "Group hover - hovering anywhere in the card triggers it",
42    demo: (
43      <div className="group flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-border/60 bg-muted/30 px-5 py-4 transition-colors hover:border-border">
44        <StaggeredHoverText text="Triggered by the parent card" />
45        <span className="text-xs text-muted-foreground">hover the card</span>
46      </div>
47    ),
48  },
49  {
50    label: "Continued stagger - startIndex chains two segments",
51    demo: (
52      <span className="stagger-group cursor-default">
53        <StaggeredHoverText text="One wave " />
54        <StaggeredHoverText
55          text="across two segments"
56          startIndex={"One wave ".length}
57          charClassName="italic"
58        />
59      </span>
60    ),
61  },
62];
63
64export function StaggerHoverTextExamples() {
65  return (
66    <div className="flex flex-col gap-8 p-6 text-2xl font-semibold tracking-tight">
67      {DEMOS.map(({ label, demo }) => (
68        <div key={label} className="flex flex-col gap-2">
69          <span className="text-xs font-normal tracking-normal text-muted-foreground">
70            {label}
71          </span>
72          {demo}
73        </div>
74      ))}
75    </div>
76  );
77}