{words[index]}

) } `,__src__:"registry/miami/ui/word-rotate.tsx",__style__:"miami",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" type"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { HTMLMotionProps } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'framer-motion'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { AnimatePresence, motion } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'framer-motion'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useEffect, useState } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"interface"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" WordRotateProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" words"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"[]"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" duration"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" number"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" framerProps"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" HTMLMotionProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'h1'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" WordRotate"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" words"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" duration"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" 2500"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" framerProps"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" initial: { opacity: "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", y: "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"50"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" animate: { opacity: "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", y: "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" exit: { opacity: "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", y: "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"50"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" transition: { duration: "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.25"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", ease: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'easeOut'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" WordRotateProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"index"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"setIndex"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" interval"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" setInterval"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" setIndex"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"prevIndex"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" =>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (prevIndex "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"+"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" 1"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"%"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" words."}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"length"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, duration)"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:" // Clean up interval on unmount"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" () "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" clearInterval"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(interval)"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, [words, duration])"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"overflow-hidden py-2"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"AnimatePresence"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" mode"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"wait"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.h1"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" key"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{words[index]}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"ny"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(className)}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"framerProps}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {words[index]}"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(n.figure,{__src__:"registry/default/ui/word-rotate.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client' import type { HTMLMotionProps } from 'framer-motion' import { AnimatePresence, motion } from 'framer-motion' import { useEffect, useState } from 'react' import { ny } from '~/lib/utils' interface WordRotateProps { words: string[] duration?: number framerProps?: HTMLMotionProps<'h1'> className?: string } export function WordRotate({ words, duration = 2500, framerProps = { initial: { opacity: 0, y: -50 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 50 }, transition: { duration: 0.25, ease: 'easeOut' }, }, className, }: WordRotateProps) { const [index, setIndex] = useState(0) useEffect(() => { const interval = setInterval(() => { setIndex(prevIndex => (prevIndex + 1) % words.length) }, duration) // Clean up interval on unmount return () => clearInterval(interval) }, [words, duration]) return (

{words[index]}

) } `,__src__:"registry/default/ui/word-rotate.tsx",__style__:"default",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" type"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { HTMLMotionProps } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'framer-motion'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { AnimatePresence, motion } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'framer-motion'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useEffect, useState } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"interface"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" WordRotateProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" words"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"[]"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" duration"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" number"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" framerProps"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" HTMLMotionProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'h1'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" WordRotate"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" words"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" duration"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" 2500"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" framerProps"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" initial: { opacity: "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", y: "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"50"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" animate: { opacity: "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", y: "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" exit: { opacity: "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", y: "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"50"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" transition: { duration: "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.25"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", ease: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'easeOut'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" WordRotateProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"index"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"setIndex"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" interval"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" setInterval"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" setIndex"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"prevIndex"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" =>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (prevIndex "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"+"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" 1"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"%"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" words."}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"length"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, duration)"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:" // Clean up interval on unmount"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" () "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" clearInterval"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(interval)"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, [words, duration])"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"overflow-hidden py-2"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"AnimatePresence"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" mode"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"wait"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.h1"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" key"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{words[index]}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"ny"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(className)}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"framerProps}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {words[index]}"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]})]})})]}),` `,(0,e.jsxs)(n.h2,{id:"props",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Prop"}),(0,e.jsx)(n.th,{children:"Type"}),(0,e.jsx)(n.th,{children:"Description"}),(0,e.jsx)(n.th,{children:"Default"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"className"}),(0,e.jsx)(n.td,{children:"string"}),(0,e.jsx)(n.td,{children:"The class name to be applied to the component"}),(0,e.jsx)(n.td,{})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"duration"}),(0,e.jsx)(n.td,{children:"number"}),(0,e.jsx)(n.td,{children:"The class name to be applied to the shimmer."}),(0,e.jsx)(n.td,{children:"2500"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"words"}),(0,e.jsx)(n.td,{children:"string[]"}),(0,e.jsx)(n.td,{children:"An array of words to rotate through"}),(0,e.jsx)(n.td,{children:'""'})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"framerProps"}),(0,e.jsx)(n.td,{children:"HTMLMotionProps"}),(0,e.jsx)(n.td,{children:"An object containing framer-motion animation props"}),(0,e.jsx)(n.td,{})]})]})]})]})}function m(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(F,{...l})}):F(l)}function a(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(v);})(); ;return Component;

Prop	Type	Description	Default
className	string	The class name to be applied to the component
duration	number	The class name to be applied to the shimmer.	2500
words	string[]	An array of words to rotate through	""
framerProps	HTMLMotionProps	An object containing framer-motion animation props

Word Rotate

Word

Installation

Props