const{Fragment:l,jsx:n,jsxs:e}=arguments[0];function _createMdxContent(F){const r={a:"a",code:"code",figure:"figure",h2:"h2",p:"p",pre:"pre",span:"span",...F.components},{ComponentDemo:s,ComponentSource:c,Step:o,Steps:a,Tabs:t,TabsContent:d,TabsList:i,TabsTrigger:p}=r;return s||_missingMdxReference("ComponentDemo",!0),c||_missingMdxReference("ComponentSource",!0),o||_missingMdxReference("Step",!0),a||_missingMdxReference("Steps",!0),t||_missingMdxReference("Tabs",!0),d||_missingMdxReference("TabsContent",!0),i||_missingMdxReference("TabsList",!0),p||_missingMdxReference("TabsTrigger",!0),e(l,{children:[e(s,{name:"demos/motion/demo-typewritter",children:[n(r.figure,{__src__:"registry/default/demos/motion/demo-typewritter.tsx","data-rehype-pretty-code-figure":"",children:n(r.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(r.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:'"use client"'}),n(r.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"import"}),n(r.span,{style:{color:"#FFF8"},children:" {"}),n(r.span,{style:{color:"#FFF"},children:" Typewriter "}),n(r.span,{style:{color:"#FFF8"},children:"}"}),n(r.span,{style:{color:"#FFF8"},children:" from"}),n(r.span,{style:{color:"#FFF8"},children:' "@/components/ui/typewritter"'}),n(r.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"import"}),n(r.span,{style:{color:"#FFF8"},children:" type"}),n(r.span,{style:{color:"#FFF8"},children:" {"}),n(r.span,{style:{color:"#FFF"},children:" PropsWithChildren "}),n(r.span,{style:{color:"#FFF8"},children:"}"}),n(r.span,{style:{color:"#FFF8"},children:" from"}),n(r.span,{style:{color:"#FFF8"},children:' "react"'}),n(r.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"const"}),n(r.span,{style:{color:"#FFF"},children:" TEXTS "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:" ["}),n(r.span,{style:{color:"#FFF8"},children:'"Testing 124"'}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:' "Look at newcult.co"'}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:' "and check gnow.io"'}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:' "Sick af"'}),n(r.span,{style:{color:"#FFF8"},children:"];"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"export"}),n(r.span,{style:{color:"#FFF8"},children:" function"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DemoTypewritter"}),n(r.span,{style:{color:"#FFF8"},children:"()"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" return"}),n(r.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"IosOgShellCard"}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"px-4 py-2 mb-3 ml-auto text-white bg-blue-500 rounded-2xl"'}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"p className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"text-sm font-semibold truncate md:text-base text-base-900"'}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"Typewriter texts"}),n(r.span,{style:{color:"#FFF8"},children:"={"}),n(r.span,{style:{color:"#FFF"},children:"TEXTS"}),n(r.span,{style:{color:"#FFF8"},children:"}"}),n(r.span,{style:{color:"#FFF"},children:" delay"}),n(r.span,{style:{color:"#FFF8"},children:"={1}"}),n(r.span,{style:{color:"#FFF"},children:" baseText"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"Yo "'}),n(r.span,{style:{color:"#FFF8"},children:" />"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"function"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" IosOgShellCard"}),n(r.span,{style:{color:"#FFF8"},children:"({"}),n(r.span,{style:{color:"#FFF"},children:" children "}),n(r.span,{style:{color:"#FFF8"},children:"}:"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" PropsWithChildren"}),n(r.span,{style:{color:"#FFF8"},children:")"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" return"}),n(r.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"flex flex-col max-w-xs px-px pb-px mx-auto rounded-lg md:max-w-xl md:min-w-80 bg-neutral-900 shadow-inner-shadow"'}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"flex flex-col p-4 md:px-5"'}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"mb-2 text-sm md:text-neutral-500 text-neutral-500"'}),n(r.span,{style:{color:"#FFF8"},children:">"}),n(r.span,{style:{color:"#FFF"},children:"iMessage"}),n(r.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"mb-3 text-xs md:text-sm text-neutral-500"'}),n(r.span,{style:{color:"#FFF8"},children:">"}),n(r.span,{style:{color:"#FFF"},children:"Today 11:29"}),n(r.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"px-4 py-2 mb-3 ml-auto text-white bg-blue-500 rounded-2xl"'}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"span"}),n(r.span,{style:{color:"#FFF8"},children:">"}),n(r.span,{style:{color:"#FFF"},children:"Hey!"}),n(r.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"px-4 py-2 mb-3 mr-auto text-white bg-neutral-700 rounded-2xl"'}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"span"}),n(r.span,{style:{color:"#FFF8"},children:">"}),n(r.span,{style:{color:"#FFF"},children:"Whats up bretheren?!"}),n(r.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" {"}),n(r.span,{style:{color:"#FFF"},children:"children"}),n(r.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"mt-3 text-xs md:text-sm text-neutral-500"'}),n(r.span,{style:{color:"#FFF8"},children:">"}),n(r.span,{style:{color:"#FFF"},children:"Delivered"}),n(r.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:"}"})})]})})}),n(r.figure,{__src__:"registry/default/demos/motion/demo-typewritter.tsx","data-rehype-pretty-code-figure":"",children:n(r.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(r.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:'"use client"'}),n(r.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"import"}),n(r.span,{style:{color:"#FFF8"},children:" {"}),n(r.span,{style:{color:"#FFF"},children:" Typewriter "}),n(r.span,{style:{color:"#FFF8"},children:"}"}),n(r.span,{style:{color:"#FFF8"},children:" from"}),n(r.span,{style:{color:"#FFF8"},children:' "@/components/ui/typewritter"'}),n(r.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"import"}),n(r.span,{style:{color:"#FFF8"},children:" type"}),n(r.span,{style:{color:"#FFF8"},children:" {"}),n(r.span,{style:{color:"#FFF"},children:" PropsWithChildren "}),n(r.span,{style:{color:"#FFF8"},children:"}"}),n(r.span,{style:{color:"#FFF8"},children:" from"}),n(r.span,{style:{color:"#FFF8"},children:' "react"'}),n(r.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"const"}),n(r.span,{style:{color:"#FFF"},children:" TEXTS "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:" ["}),n(r.span,{style:{color:"#FFF8"},children:'"Testing 124"'}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:' "Look at newcult.co"'}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:' "and check gnow.io"'}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:' "Sick af"'}),n(r.span,{style:{color:"#FFF8"},children:"];"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"export"}),n(r.span,{style:{color:"#FFF8"},children:" function"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DemoTypewritter"}),n(r.span,{style:{color:"#FFF8"},children:"()"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" return"}),n(r.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"IosOgShellCard"}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"px-4 py-2 mb-3 ml-auto text-white bg-blue-500 rounded-2xl"'}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"p className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"text-sm font-semibold truncate md:text-base text-base-900"'}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"Typewriter texts"}),n(r.span,{style:{color:"#FFF8"},children:"={"}),n(r.span,{style:{color:"#FFF"},children:"TEXTS"}),n(r.span,{style:{color:"#FFF8"},children:"}"}),n(r.span,{style:{color:"#FFF"},children:" delay"}),n(r.span,{style:{color:"#FFF8"},children:"={1}"}),n(r.span,{style:{color:"#FFF"},children:" baseText"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"Yo "'}),n(r.span,{style:{color:"#FFF8"},children:" />"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"function"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" IosOgShellCard"}),n(r.span,{style:{color:"#FFF8"},children:"({"}),n(r.span,{style:{color:"#FFF"},children:" children "}),n(r.span,{style:{color:"#FFF8"},children:"}:"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" PropsWithChildren"}),n(r.span,{style:{color:"#FFF8"},children:")"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" return"}),n(r.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"flex flex-col max-w-xs px-px pb-px mx-auto rounded-lg md:max-w-xl md:min-w-80 bg-neutral-900 shadow-inner-shadow"'}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"flex flex-col p-4 md:px-5"'}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"mb-2 text-sm md:text-neutral-500 text-neutral-500"'}),n(r.span,{style:{color:"#FFF8"},children:">"}),n(r.span,{style:{color:"#FFF"},children:"iMessage"}),n(r.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"mb-3 text-xs md:text-sm text-neutral-500"'}),n(r.span,{style:{color:"#FFF8"},children:">"}),n(r.span,{style:{color:"#FFF"},children:"Today 11:29"}),n(r.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"px-4 py-2 mb-3 ml-auto text-white bg-blue-500 rounded-2xl"'}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"span"}),n(r.span,{style:{color:"#FFF8"},children:">"}),n(r.span,{style:{color:"#FFF"},children:"Hey!"}),n(r.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"px-4 py-2 mb-3 mr-auto text-white bg-neutral-700 rounded-2xl"'}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"span"}),n(r.span,{style:{color:"#FFF8"},children:">"}),n(r.span,{style:{color:"#FFF"},children:"Whats up bretheren?!"}),n(r.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" {"}),n(r.span,{style:{color:"#FFF"},children:"children"}),n(r.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"div className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"mt-3 text-xs md:text-sm text-neutral-500"'}),n(r.span,{style:{color:"#FFF8"},children:">"}),n(r.span,{style:{color:"#FFF"},children:"Delivered"}),n(r.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),"\n",n(r.h2,{id:"about",children:"About"}),"\n",e(r.p,{children:["The original idea of the ",n(r.code,{children:""})," component is coming from ",n("u",{children:n(r.a,{href:"https://www.cult-ui.com",children:"cult-ui"})})," website."]}),"\n",n(r.h2,{id:"installation",children:"Installation"}),"\n",e(t,{defaultValue:"cli",children:[e(i,{children:[n(p,{value:"cli",children:"CLI"}),n(p,{value:"manual",children:"Manual"})]}),e(d,{value:"cli",children:[n(r.p,{children:"Run the following command:"}),n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"bash","data-theme":"Lambda Studio — Blackout",children:n(r.code,{"data-language":"bash","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:"npx"}),n(r.span,{style:{color:"#FFF8"},children:" ever-ui-clx@0.2.1"}),n(r.span,{style:{color:"#FFF8"},children:" add"}),n(r.span,{style:{color:"#FFF8"},children:" demo-typewritter"})]})})})})]}),n(d,{value:"manual",children:e(a,{children:[n(o,{children:"Copy and paste the following code into your project:"}),n(r.p,{children:n(r.code,{children:"components/ui/typewritter.tsx"})}),n(c,{name:"ui/typewritter",children:n(r.figure,{__src__:"registry/default/ui/typewritter.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:n(r.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(r.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:'"use client"'}),n(r.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"import"}),n(r.span,{style:{color:"#FFF8"},children:" {"}),n(r.span,{style:{color:"#FFF"},children:" animate"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" motion"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" useMotionValue"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" useTransform "}),n(r.span,{style:{color:"#FFF8"},children:"}"}),n(r.span,{style:{color:"#FFF8"},children:" from"}),n(r.span,{style:{color:"#FFF8"},children:' "framer-motion"'}),n(r.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"import"}),n(r.span,{style:{color:"#FFF8"},children:" {"}),n(r.span,{style:{color:"#FFF"},children:" useEffect"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" useState "}),n(r.span,{style:{color:"#FFF8"},children:"}"}),n(r.span,{style:{color:"#FFF8"},children:" from"}),n(r.span,{style:{color:"#FFF8"},children:' "react"'}),n(r.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"export"}),n(r.span,{style:{color:"#FFF8"},children:" interface"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ITypewriterProps"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" delay"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF"},children:" number"}),n(r.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" texts"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF"},children:" string"}),n(r.span,{style:{color:"#FFF8"},children:"[];"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" baseText"}),n(r.span,{style:{color:"#FFF8"},children:"?:"}),n(r.span,{style:{color:"#FFF"},children:" string"}),n(r.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"export"}),n(r.span,{style:{color:"#FFF8"},children:" function"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Typewriter"}),n(r.span,{style:{color:"#FFF8"},children:"({"}),n(r.span,{style:{color:"#FFF"},children:" delay"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" texts"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" baseText "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:' ""'}),n(r.span,{style:{color:"#FFF8"},children:" }:"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ITypewriterProps"}),n(r.span,{style:{color:"#FFF8"},children:")"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" const"}),n(r.span,{style:{color:"#FFF8"},children:" ["}),n(r.span,{style:{color:"#FFF"},children:"animationComplete"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" setAnimationComplete"}),n(r.span,{style:{color:"#FFF8"},children:"]"}),n(r.span,{style:{color:"#FFF8"},children:" ="}),n(r.span,{style:{color:"#FFF"},children:" useState"}),n(r.span,{style:{color:"#FFF8"},children:"(false);"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" const"}),n(r.span,{style:{color:"#FFF"},children:" count "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF"},children:" useMotionValue"}),n(r.span,{style:{color:"#FFF8"},children:"(0);"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" const"}),n(r.span,{style:{color:"#FFF"},children:" rounded "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF"},children:" useTransform"}),n(r.span,{style:{color:"#FFF8"},children:"("}),n(r.span,{style:{color:"#FFF"},children:"count"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:" ("}),n(r.span,{style:{color:"#FFF"},children:"latest"}),n(r.span,{style:{color:"#FFF8"},children:")"}),n(r.span,{style:{color:"#FFF8"},children:" =>"}),n(r.span,{style:{color:"#FFF"},children:" Math"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"round"}),n(r.span,{style:{color:"#FFF8"},children:"("}),n(r.span,{style:{color:"#FFF"},children:"latest"}),n(r.span,{style:{color:"#FFF8"},children:"));"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" const"}),n(r.span,{style:{color:"#FFF"},children:" displayText "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF"},children:" useTransform"}),n(r.span,{style:{color:"#FFF8"},children:"("}),n(r.span,{style:{color:"#FFF"},children:"rounded"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:" ("}),n(r.span,{style:{color:"#FFF"},children:"latest"}),n(r.span,{style:{color:"#FFF8"},children:")"}),n(r.span,{style:{color:"#FFF8"},children:" =>"}),n(r.span,{style:{color:"#FFF"},children:" baseText"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"slice"}),n(r.span,{style:{color:"#FFF8"},children:"(0,"}),n(r.span,{style:{color:"#FFF"},children:" latest"}),n(r.span,{style:{color:"#FFF8"},children:"));"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" useEffect"}),n(r.span,{style:{color:"#FFF8"},children:"(()"}),n(r.span,{style:{color:"#FFF8"},children:" =>"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" const"}),n(r.span,{style:{color:"#FFF"},children:" controls "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF"},children:" animate"}),n(r.span,{style:{color:"#FFF8"},children:"("}),n(r.span,{style:{color:"#FFF"},children:"count"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" baseText"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"length"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" type"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:' "tween"'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" delay"}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" duration"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:" 1,"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" ease"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:' "easeInOut"'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onComplete"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:" ()"}),n(r.span,{style:{color:"#FFF8"},children:" =>"}),n(r.span,{style:{color:"#FFF"},children:" setAnimationComplete"}),n(r.span,{style:{color:"#FFF8"},children:"(true),"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" });"})}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" return"}),n(r.span,{style:{color:"#FFF8"},children:" ()"}),n(r.span,{style:{color:"#FFF8"},children:" =>"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" controls"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"stop"}),n(r.span,{style:{color:"#FFF8"},children:"?.();"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" };"})}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" },"}),n(r.span,{style:{color:"#FFF8"},children:" ["}),n(r.span,{style:{color:"#FFF"},children:"count"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" baseText"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"length"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" delay"}),n(r.span,{style:{color:"#FFF8"},children:"]);"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" return"}),n(r.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"span"}),n(r.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"motion.span"}),n(r.span,{style:{color:"#FFF8"},children:">{"}),n(r.span,{style:{color:"#FFF"},children:"displayText"}),n(r.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" {"}),n(r.span,{style:{color:"#FFF"},children:"animationComplete "}),n(r.span,{style:{color:"#FFF8"},children:"&&"}),n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"RepeatedTextAnimation texts"}),n(r.span,{style:{color:"#FFF8"},children:"={"}),n(r.span,{style:{color:"#FFF"},children:"texts"}),n(r.span,{style:{color:"#FFF8"},children:"}"}),n(r.span,{style:{color:"#FFF"},children:" delay"}),n(r.span,{style:{color:"#FFF8"},children:"={"}),n(r.span,{style:{color:"#FFF"},children:"delay "}),n(r.span,{style:{color:"#FFF8"},children:"+"}),n(r.span,{style:{color:"#FFF8"},children:" 1}"}),n(r.span,{style:{color:"#FFF8"},children:" />}"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"BlinkingCursor "}),n(r.span,{style:{color:"#FFF8"},children:"/>"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"export"}),n(r.span,{style:{color:"#FFF8"},children:" interface"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" IRepeatedTextAnimationProps"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" delay"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF"},children:" number"}),n(r.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" texts"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF"},children:" string"}),n(r.span,{style:{color:"#FFF8"},children:"[];"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"const"}),n(r.span,{style:{color:"#FFF"},children:" defaultTexts "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:" ["})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:' "quiz page with questions and answers"'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:' "blog Article Details Page Layout"'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:' "ecommerce dashboard with a sidebar"'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:' "ui like platform.openai.com...."'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:' "buttttton"'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:' "aop that tracks non-standard split sleep cycles"'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:' "transparent card to showcase achievements of a user"'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:"];"})}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"function"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" RepeatedTextAnimation"}),n(r.span,{style:{color:"#FFF8"},children:"({"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" delay"}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" texts "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF"},children:" defaultTexts"}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"}:"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" IRepeatedTextAnimationProps"}),n(r.span,{style:{color:"#FFF8"},children:")"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" const"}),n(r.span,{style:{color:"#FFF"},children:" textIndex "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF"},children:" useMotionValue"}),n(r.span,{style:{color:"#FFF8"},children:"(0);"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" const"}),n(r.span,{style:{color:"#FFF"},children:" baseText "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF"},children:" useTransform"}),n(r.span,{style:{color:"#FFF8"},children:"("}),n(r.span,{style:{color:"#FFF"},children:"textIndex"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:" ("}),n(r.span,{style:{color:"#FFF"},children:"latest"}),n(r.span,{style:{color:"#FFF8"},children:")"}),n(r.span,{style:{color:"#FFF8"},children:" =>"}),n(r.span,{style:{color:"#FFF"},children:" texts"}),n(r.span,{style:{color:"#FFF8"},children:"["}),n(r.span,{style:{color:"#FFF"},children:"latest"}),n(r.span,{style:{color:"#FFF8"},children:"]"}),n(r.span,{style:{color:"#FFF8"},children:" ||"}),n(r.span,{style:{color:"#FFF8"},children:' ""'}),n(r.span,{style:{color:"#FFF8"},children:");"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" const"}),n(r.span,{style:{color:"#FFF"},children:" count "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF"},children:" useMotionValue"}),n(r.span,{style:{color:"#FFF8"},children:"(0);"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" const"}),n(r.span,{style:{color:"#FFF"},children:" rounded "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF"},children:" useTransform"}),n(r.span,{style:{color:"#FFF8"},children:"("}),n(r.span,{style:{color:"#FFF"},children:"count"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:" ("}),n(r.span,{style:{color:"#FFF"},children:"latest"}),n(r.span,{style:{color:"#FFF8"},children:")"}),n(r.span,{style:{color:"#FFF8"},children:" =>"}),n(r.span,{style:{color:"#FFF"},children:" Math"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"round"}),n(r.span,{style:{color:"#FFF8"},children:"("}),n(r.span,{style:{color:"#FFF"},children:"latest"}),n(r.span,{style:{color:"#FFF8"},children:"));"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" const"}),n(r.span,{style:{color:"#FFF"},children:" displayText "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF"},children:" useTransform"}),n(r.span,{style:{color:"#FFF8"},children:"("}),n(r.span,{style:{color:"#FFF"},children:"rounded"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:" ("}),n(r.span,{style:{color:"#FFF"},children:"latest"}),n(r.span,{style:{color:"#FFF8"},children:")"}),n(r.span,{style:{color:"#FFF8"},children:" =>"}),n(r.span,{style:{color:"#FFF"},children:" baseText"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"get"}),n(r.span,{style:{color:"#FFF8"},children:"()."}),n(r.span,{style:{color:"#FFF"},children:"slice"}),n(r.span,{style:{color:"#FFF8"},children:"(0,"}),n(r.span,{style:{color:"#FFF"},children:" latest"}),n(r.span,{style:{color:"#FFF8"},children:"));"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" const"}),n(r.span,{style:{color:"#FFF"},children:" updatedThisRound "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF"},children:" useMotionValue"}),n(r.span,{style:{color:"#FFF8"},children:"(true);"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" useEffect"}),n(r.span,{style:{color:"#FFF8"},children:"(()"}),n(r.span,{style:{color:"#FFF8"},children:" =>"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" const"}),n(r.span,{style:{color:"#FFF"},children:" animation "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF"},children:" animate"}),n(r.span,{style:{color:"#FFF8"},children:"("}),n(r.span,{style:{color:"#FFF"},children:"count"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF8"},children:" 60,"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" type"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:' "tween"'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" delay"}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" duration"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:" 1,"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" ease"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:' "easeIn"'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" repeat"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF"},children:" Number"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"POSITIVE_INFINITY"}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" repeatType"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:' "reverse"'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" repeatDelay"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:" 1,"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onUpdate"}),n(r.span,{style:{color:"#FFF8"},children:"("}),n(r.span,{style:{color:"#FFF"},children:"latest"}),n(r.span,{style:{color:"#FFF8"},children:")"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" if"}),n(r.span,{style:{color:"#FFF8"},children:" ("}),n(r.span,{style:{color:"#FFF"},children:"updatedThisRound"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"get"}),n(r.span,{style:{color:"#FFF8"},children:"()"}),n(r.span,{style:{color:"#FFF8"},children:" &&"}),n(r.span,{style:{color:"#FFF"},children:" latest "}),n(r.span,{style:{color:"#FFF8"},children:">"}),n(r.span,{style:{color:"#FFF8"},children:" 0)"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" updatedThisRound"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"set"}),n(r.span,{style:{color:"#FFF8"},children:"(false);"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" }"}),n(r.span,{style:{color:"#FFF8"},children:" else"}),n(r.span,{style:{color:"#FFF8"},children:" if"}),n(r.span,{style:{color:"#FFF8"},children:" (!"}),n(r.span,{style:{color:"#FFF"},children:"updatedThisRound"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"get"}),n(r.span,{style:{color:"#FFF8"},children:"()"}),n(r.span,{style:{color:"#FFF8"},children:" &&"}),n(r.span,{style:{color:"#FFF"},children:" latest "}),n(r.span,{style:{color:"#FFF8"},children:"==="}),n(r.span,{style:{color:"#FFF8"},children:" 0)"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" textIndex"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"set"}),n(r.span,{style:{color:"#FFF8"},children:"(("}),n(r.span,{style:{color:"#FFF"},children:"textIndex"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"get"}),n(r.span,{style:{color:"#FFF8"},children:"()"}),n(r.span,{style:{color:"#FFF8"},children:" +"}),n(r.span,{style:{color:"#FFF8"},children:" 1)"}),n(r.span,{style:{color:"#FFF8"},children:" %"}),n(r.span,{style:{color:"#FFF"},children:" texts"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"length"}),n(r.span,{style:{color:"#FFF8"},children:");"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" updatedThisRound"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"set"}),n(r.span,{style:{color:"#FFF8"},children:"(true);"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" });"})}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" return"}),n(r.span,{style:{color:"#FFF8"},children:" ()"}),n(r.span,{style:{color:"#FFF8"},children:" =>"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" animation"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"stop"}),n(r.span,{style:{color:"#FFF8"},children:"?.();"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" };"})}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" },"}),n(r.span,{style:{color:"#FFF8"},children:" ["}),n(r.span,{style:{color:"#FFF"},children:"count"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" delay"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" textIndex"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" texts"}),n(r.span,{style:{color:"#FFF8"},children:","}),n(r.span,{style:{color:"#FFF"},children:" updatedThisRound"}),n(r.span,{style:{color:"#FFF8"},children:"]);"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" return"}),n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"motion.span className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"inline"'}),n(r.span,{style:{color:"#FFF8"},children:">{"}),n(r.span,{style:{color:"#FFF"},children:"displayText"}),n(r.span,{style:{color:"#FFF8"},children:"};"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"const"}),n(r.span,{style:{color:"#FFF"},children:" cursorVariants "}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" blinking"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" opacity"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:" [0,"}),n(r.span,{style:{color:"#FFF8"},children:" 0,"}),n(r.span,{style:{color:"#FFF8"},children:" 1,"}),n(r.span,{style:{color:"#FFF8"},children:" 1],"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" transition"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" duration"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:" 1,"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" repeat"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF"},children:" Number"}),n(r.span,{style:{color:"#FFF8"},children:"."}),n(r.span,{style:{color:"#FFF"},children:"POSITIVE_INFINITY"}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" repeatDelay"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:" 0,"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" ease"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:' "linear"'}),n(r.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" times"}),n(r.span,{style:{color:"#FFF8"},children:":"}),n(r.span,{style:{color:"#FFF8"},children:" [0,"}),n(r.span,{style:{color:"#FFF8"},children:" 0.5,"}),n(r.span,{style:{color:"#FFF8"},children:" 0.5,"}),n(r.span,{style:{color:"#FFF8"},children:" 1],"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:"};"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:"function"}),n(r.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BlinkingCursor"}),n(r.span,{style:{color:"#FFF8"},children:"()"}),n(r.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" return"}),n(r.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF8"},children:" <"}),n(r.span,{style:{color:"#FFF"},children:"motion.div"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" variants"}),n(r.span,{style:{color:"#FFF8"},children:"={"}),n(r.span,{style:{color:"#FFF"},children:"cursorVariants"}),n(r.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" animate"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"blinking"'})]}),"\n",e(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#FFF"},children:" className"}),n(r.span,{style:{color:"#FFF8"},children:"="}),n(r.span,{style:{color:"#FFF8"},children:'"inline-block h-5 w-[1px] translate-y-1 bg-neutral-900"'})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" />"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),n(o,{children:"Update the imports to match your project setup."})]})})]}),"\n",n(r.h2,{id:"usage",children:"Usage"}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:n(r.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:n(r.span,{"data-line":"",children:" "})})})}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:n(r.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:n(r.span,{"data-line":"",children:" "})})})})]})}return{default:function(l={}){const{wrapper:e}=l.components||{};return e?n(e,{...l,children:n(_createMdxContent,{...l})}):_createMdxContent(l)}};function _missingMdxReference(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}

Extensions (155)

Typewritter

Typing Text