{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cascade-text-demo",
  "title": "Cascade Text Demo",
  "description": "Example of Cascade Text with a smooth line-by-line reveal.",
  "registryDependencies": [
    "https://atlasui.dev/r/cascade-text.json"
  ],
  "files": [
    {
      "path": "registry/react/examples/cascade-text-demo.tsx",
      "content": "import { CascadeText } from \"@/registry/react/atlasui/cascade-text\";\n\nexport const CascadeTextDemo = () => {\n  return (\n    <div className=\"flex flex-col gap-4 p-5\">\n      <CascadeText>\n        <h1 className=\"text-[2.5rem] font-medium tracking-tighter\">\n          Seen This on Awwwards? Same Energy.\n        </h1>\n      </CascadeText>\n\n      <CascadeText delay={0.2}>\n        <p className=\"text-muted-foreground text-base font-medium\">\n          You could reveal everything instantly. You could also microwave a\n          steak. We chose patience. Because good interfaces, like good food,\n          deserve a little timing and a little respect.\n        </p>\n      </CascadeText>\n\n      <CascadeText delay={0.4}>\n        <p className=\"text-muted-foreground text-base font-medium\">\n          Cascade Text brings in each line with just enough drama to feel\n          intentional, and just enough restraint to keep it classy. No\n          attention-seeking theatrics. Just a steady, confident rise that feels\n          composed from start to finish.\n        </p>\n      </CascadeText>\n\n      <CascadeText delay={0.6}>\n        <p className=\"text-muted-foreground text-base font-medium\">\n          It&apos;s smooth. It&apos;s subtle. It doesn&apos;t beg for attention.\n          It just quietly says, &ldquo;Yeah… this UI knows what it&apos;s\n          doing.&rdquo; Because when motion is done right, users don&apos;t\n          notice the animation. They notice how effortless everything feels. And\n          that quiet effortlessness? That&apos;s the whole point.\n        </p>\n      </CascadeText>\n\n      <CascadeText delay={0.8}>\n        <p className=\"text-muted-foreground text-base font-medium\">\n          I&apos;m quite surprised that you are still reading this. But I&apos;m\n          glad you made it this far. So go ahead and explore the rest of the\n          Atlas UI components.\n        </p>\n      </CascadeText>\n    </div>\n  );\n};\n",
      "type": "registry:example",
      "target": "components/cascade-text-demo.tsx"
    }
  ],
  "type": "registry:example"
}