) } `,__src__:"registry/miami/example/fade-text-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { FadeText } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/fade-text'"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" async"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" FadeTextDemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex flex-col space-y-8 text-center"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FadeText"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-4xl font-bold text-black dark:text-white"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"up"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" framerProps"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" show: { transition: { delay: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.2"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } },"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Fade Up"'})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FadeText"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-4xl font-bold text-black dark:text-white"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"right"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" framerProps"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" show: { transition: { delay: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.4"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } },"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Fade Right"'})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FadeText"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-4xl font-bold text-black dark:text-white"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"down"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" framerProps"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" show: { transition: { delay: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.6"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } },"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Fade Down"'})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FadeText"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-4xl font-bold text-black dark:text-white"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"left"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" framerProps"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" show: { transition: { delay: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.8"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } },"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Fade Left"'})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,l.jsx)(n.figure,{__src__:"registry/default/example/fade-text-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { FadeText } from '~/components/ui/fade-text' export async function FadeTextDemo() { return (

) } `,__src__:"registry/default/example/fade-text-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { FadeText } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/fade-text'"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" async"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" FadeTextDemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex flex-col space-y-8 text-center"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FadeText"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-4xl font-bold text-black dark:text-white"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"up"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" framerProps"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" show: { transition: { delay: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.2"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } },"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Fade Up"'})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FadeText"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-4xl font-bold text-black dark:text-white"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"right"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" framerProps"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" show: { transition: { delay: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.4"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } },"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Fade Right"'})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FadeText"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-4xl font-bold text-black dark:text-white"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"down"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" framerProps"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" show: { transition: { delay: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.6"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } },"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Fade Down"'})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FadeText"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-4xl font-bold text-black dark:text-white"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"left"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" framerProps"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" show: { transition: { delay: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.8"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } },"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Fade Left"'})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(n.h3,{id:"installation",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(d,{defaultValue:"cli",children:[(0,l.jsxs)(p,{children:[(0,l.jsx)(i,{value:"cli",children:"CLI"}),(0,l.jsx)(i,{value:"manual",children:"Manual"})]}),(0,l.jsx)(t,{value:"cli",children:(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npx nyxb@latest add fade-text `,__npmCommand__:`npx nyxb@latest add fade-text `,__yarnCommand__:`npx nyxb@latest add fade-text `,__pnpmCommand__:`pnpm dlx nyxb@latest add fade-text `,__bunCommand__:`bunx --bun nyxb@latest add fade-text `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" nyxb@latest"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" fade-text"})]})})})})}),(0,l.jsx)(t,{value:"manual",children:(0,l.jsxs)(s,{children:[(0,l.jsx)(n.p,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"text","data-theme":"github-dark",__rawString__:`components/ui/fade-text.tsx `,children:(0,l.jsx)(n.code,{"data-language":"text","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{children:"components/ui/fade-text.tsx"})})})})}),(0,l.jsxs)(o,{name:"fade-text",children:[(0,l.jsx)(n.figure,{__src__:"registry/miami/ui/fade-text.tsx",__style__:"miami","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client' import type { Variants } from 'framer-motion' import { motion } from 'framer-motion' import { useMemo } from 'react' interface FadeTextProps { className?: string direction?: 'up' | 'down' | 'left' | 'right' framerProps?: Variants text: string } export function FadeText({ direction = 'up', className, framerProps = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { type: 'spring' } }, }, text, }: FadeTextProps) { const directionOffset = useMemo(() => { const map = { up: 10, down: -10, left: -10, right: 10 } return map[direction] }, [direction]) const axis = direction === 'up' || direction === 'down' ? 'y' : 'x' const FADE_ANIMATION_VARIANTS = useMemo(() => { const { hidden, show, ...rest } = framerProps as { [name: string]: { [name: string]: number, opacity: number } } return { ...rest, hidden: { ...(hidden ?? {}), opacity: hidden?.opacity ?? 0, [axis]: hidden?.[axis] ?? directionOffset, }, show: { ...(show ?? {}), opacity: show?.opacity ?? 1, [axis]: show?.[axis] ?? 0, }, } }, [directionOffset, axis, framerProps]) return ( {text} ) } `,__src__:"registry/miami/ui/fade-text.tsx",__style__:"miami",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Variants } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'framer-motion'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { motion } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'framer-motion'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useMemo } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" FadeTextProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'up'"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'down'"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'left'"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'right'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" framerProps"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Variants"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" FadeText"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'up'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" framerProps"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" hidden: { opacity: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" show: { opacity: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", transition: { type: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'spring'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } },"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" text"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" FadeTextProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" directionOffset"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useMemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" map"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { up: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"10"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", down: "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"10"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", left: "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"10"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", right: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"10"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" map[direction]"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, [direction])"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" axis"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" direction "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'up'"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ||"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" direction "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'down'"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ?"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'y'"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'x'"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" FADE_ANIMATION_VARIANTS"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useMemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"hidden"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"show"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"rest"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" framerProps "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"name"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ["}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"name"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"opacity"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"rest,"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" hidden: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(hidden "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {}),"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" opacity: hidden?.opacity "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" [axis]: hidden?.[axis] "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" directionOffset,"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" show: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(show "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {}),"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" opacity: show?.opacity "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" [axis]: show?.[axis] "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, [directionOffset, axis, framerProps])"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" initial"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"hidden"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" animate"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"show"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" viewport"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{ once: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" variants"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FADE_ANIMATION_VARIANTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.span"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{className}>{text}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,l.jsx)(n.figure,{__src__:"registry/default/ui/fade-text.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client' import type { Variants } from 'framer-motion' import { motion } from 'framer-motion' import { useMemo } from 'react' interface FadeTextProps { className?: string direction?: 'up' | 'down' | 'left' | 'right' framerProps?: Variants text: string } export function FadeText({ direction = 'up', className, framerProps = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { type: 'spring' } }, }, text, }: FadeTextProps) { const directionOffset = useMemo(() => { const map = { up: 10, down: -10, left: -10, right: 10 } return map[direction] }, [direction]) const axis = direction === 'up' || direction === 'down' ? 'y' : 'x' const FADE_ANIMATION_VARIANTS = useMemo(() => { const { hidden, show, ...rest } = framerProps as { [name: string]: { [name: string]: number, opacity: number } } return { ...rest, hidden: { ...(hidden ?? {}), opacity: hidden?.opacity ?? 0, [axis]: hidden?.[axis] ?? directionOffset, }, show: { ...(show ?? {}), opacity: show?.opacity ?? 1, [axis]: show?.[axis] ?? 0, }, } }, [directionOffset, axis, framerProps]) return ( {text} ) } `,__src__:"registry/default/ui/fade-text.tsx",__style__:"default",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Variants } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'framer-motion'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { motion } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'framer-motion'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useMemo } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" FadeTextProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'up'"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'down'"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'left'"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'right'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" framerProps"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Variants"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" FadeText"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'up'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" framerProps"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" hidden: { opacity: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" show: { opacity: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", transition: { type: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'spring'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } },"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" text"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" FadeTextProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" directionOffset"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useMemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" map"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { up: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"10"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", down: "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"10"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", left: "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"10"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", right: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"10"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" map[direction]"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, [direction])"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" axis"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" direction "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'up'"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ||"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" direction "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'down'"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ?"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'y'"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'x'"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" FADE_ANIMATION_VARIANTS"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useMemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"hidden"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"show"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"rest"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" framerProps "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"name"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ["}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"name"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"opacity"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"rest,"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" hidden: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(hidden "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {}),"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" opacity: hidden?.opacity "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" [axis]: hidden?.[axis] "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" directionOffset,"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" show: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(show "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {}),"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" opacity: show?.opacity "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" [axis]: show?.[axis] "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, [directionOffset, axis, framerProps])"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" initial"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"hidden"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" animate"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"show"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" viewport"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{ once: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" variants"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FADE_ANIMATION_VARIANTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.span"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{className}>{text}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]})]})})]}),` `,(0,l.jsxs)(n.h2,{id:"props",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Prop"}),(0,l.jsx)(n.th,{children:"Type"}),(0,l.jsx)(n.th,{children:"Description"}),(0,l.jsx)(n.th,{children:"Default"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"className"}),(0,l.jsx)(n.td,{children:"string"}),(0,l.jsx)(n.td,{children:"The class name to be applied to the component"}),(0,l.jsx)(n.td,{})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"direction"}),(0,l.jsx)(n.td,{children:"string"}),(0,l.jsx)(n.td,{children:'Can be: "down" , "left", "right", "up"'}),(0,l.jsx)(n.td,{children:'"up"'})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"text"}),(0,l.jsx)(n.td,{children:"string"}),(0,l.jsx)(n.td,{children:"Text to animate"}),(0,l.jsx)(n.td,{children:'""'})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"framerProps"}),(0,l.jsx)(n.td,{children:"HTMLMotionProps"}),(0,l.jsx)(n.td,{children:"An object containing framer-motion animation props"}),(0,l.jsx)(n.td,{})]})]})]})]})}function m(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(F,{...e})}):F(e)}function a(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(T);})(); ;return Component;

Prop	Type	Description	Default
className	string	The class name to be applied to the component
direction	string	Can be: "down" , "left", "right", "up"	"up"
text	string	Text to animate	""
framerProps	HTMLMotionProps	An object containing framer-motion animation props

Fade Text

Installation

Props