{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"letter-pullup","type":"registry:ui","title":"LetterPullup","description":"Staggered letter pull-up animation with wave entrance effect","author":"fancy-ui <https://fancy-ui.rama.app>","categories":["text"],"registryDependencies":["https://fancy-ui.rama.app/r/utils.json"],"files":[{"path":"react/src/components/letter-pullup/LetterPullup.tsx","content":"\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils\";\nimport \"./letter-pullup.css\";\n\n/**\n * LetterPullup - Staggered letter pull-up animation\n *\n * Each letter of the provided text pulls up from below with a staggered delay,\n * creating a wave-like entrance effect. Pure CSS animation.\n */\nexport interface LetterPullupProps extends Omit<HTMLAttributes<HTMLDivElement>, \"className\"> {\n\t/** Text to animate (each character gets its own animation) */\n\twords: string;\n\t/** Delay between each letter animation (seconds) */\n\tdelay?: number;\n\t/** Additional CSS classes */\n\tclassName?: string;\n}\n\nexport function LetterPullup({ words, delay = 0.05, className, ...props }: LetterPullupProps) {\n\tconst letters = words.split(\"\");\n\n\treturn (\n\t\t<div className=\"letter-pullup flex justify-center\" {...props}>\n\t\t\t{letters.map((letter, index) => (\n\t\t\t\t<span\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"letter-pullup-char inline-block text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:leading-[5rem] dark:text-white\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tanimation: \"letterPullUp 0.5s ease forwards\",\n\t\t\t\t\t\tanimationDelay: `${index * delay}s`,\n\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\ttransform: \"translateY(100px)\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{letter === \" \" ? \" \" : letter}\n\t\t\t\t</span>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n","type":"registry:ui","target":"@ui/fancy/components/letter-pullup/LetterPullup.tsx"},{"path":"react/src/components/letter-pullup/index.ts","content":"\"use client\";\n\nexport { LetterPullup } from \"./LetterPullup\";\nexport type { LetterPullupProps } from \"./LetterPullup\";\n","type":"registry:ui","target":"@ui/fancy/components/letter-pullup/index.ts"},{"path":"react/src/components/letter-pullup/letter-pullup.css","content":"@keyframes letterPullUp {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translateY(100px);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n","type":"registry:ui","target":"@ui/fancy/components/letter-pullup/letter-pullup.css"}],"meta":{"license":"MIT","package":"fancy-ui-react","version":"0.7.0","source":"https://fancy-ui.rama.app/docs/components/letter-pullup?framework=react"}}