Cascade Text Demo

1import { CascadeText } from "@/registry/react/atlasui/cascade-text";
2 
3export const CascadeTextDemo = () => {
4  return (
5    <div className="flex flex-col gap-4 p-5">
6      <CascadeText>
7        <h1 className="text-[2.5rem] font-medium tracking-tighter">
8          Seen This on Awwwards? Same Energy.
9        </h1>
10      </CascadeText>
11 
12      <CascadeText delay={0.2}>
13        <p className="text-muted-foreground text-base font-medium">
14          You could reveal everything instantly. You could also microwave a
15          steak. We chose patience. Because good interfaces, like good food,
16          deserve a little timing and a little respect.
17        </p>
18      </CascadeText>
19 
20      <CascadeText delay={0.4}>
21        <p className="text-muted-foreground text-base font-medium">
22          Cascade Text brings in each line with just enough drama to feel
23          intentional, and just enough restraint to keep it classy. No
24          attention-seeking theatrics. Just a steady, confident rise that feels
25          composed from start to finish.
26        </p>
27      </CascadeText>
28 
29      <CascadeText delay={0.6}>
30        <p className="text-muted-foreground text-base font-medium">
31          It&apos;s smooth. It&apos;s subtle. It doesn&apos;t beg for attention.
32          It just quietly says, &ldquo;Yeah… this UI knows what it&apos;s
33          doing.&rdquo; Because when motion is done right, users don&apos;t
34          notice the animation. They notice how effortless everything feels. And
35          that quiet effortlessness? That&apos;s the whole point.
36        </p>
37      </CascadeText>
38 
39      <CascadeText delay={0.8}>
40        <p className="text-muted-foreground text-base font-medium">
41          I&apos;m quite surprised that you are still reading this. But I&apos;m
42          glad you made it this far. So go ahead and explore the rest of the
43          Atlas UI components.
44        </p>
45      </CascadeText>
46    </div>
47  );
48};