51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T12b4,'use client'; import { motion } from 'motion/react'; import { useEffect, useLayoutEffect, useRef, useState, useCallback, } from 'react'; type TypewriterSequence = { text: string; deleteAfter?: boolean; pauseAfter?: number; }; interface TypewriterProps { sequences?: TypewriterSequence[]; typingSpeed?: number; deleteSpeed?: number; startDelay?: number; pauseBeforeDelete?: number; loopDelay?: number; autoLoop?: boolean; naturalVariance?: boolean; className?: string; } const DEFAULT_SEQUENCES: TypewriterSequence[] = [ { text: 'Typewriter', deleteAfter: true }, { text: 'Multiple Words', deleteAfter: true }, { text: 'Auto Loop', deleteAfter: false }, ]; const getRandomTypingDelay = (baseSpeed: number): number => { if (Math.random() < 0.1) return baseSpeed * 2; if (Math.random() > 0.9) return baseSpeed * 0.5; const variance = 0.4; const min = baseSpeed * (1 - variance); const max = baseSpeed * (1 + variance); return Math.random() * (max - min) + min; }; export function Typewriter({ sequences = DEFAULT_SEQUENCES, typingSpeed = 50, deleteSpeed = 30, startDelay = 200, pauseBeforeDelete = 1000, loopDelay = 1000, autoLoop = true, naturalVariance = true, className, }: TypewriterProps) { const [displayText, setDisplayText] = useState(''); const timeoutRef = useRef | null>(null); const sequenceIndexRef = useRef(0); const charIndexRef = useRef(0); const sequencesRef = useRef(sequences); const typeNextCharRef = useRef<() => void>(() => {}); const deleteCharRef = useRef<() => void>(() => {}); useLayoutEffect(() => { sequencesRef.current = sequences; }); const schedule = useCallback((fn: () => void, delay: number) => { if (timeoutRef.current) clearTimeout(timeoutRef.current); timeoutRef.current = setTimeout(fn, delay); }, []); const typeNextChar = useCallback(() => { const seq = sequencesRef.current[sequenceIndexRef.current]; if (!seq) return; if (charIndexRef.current < seq.text.length) { charIndexRef.current += 1; setDisplayText(seq.text.slice(0, charIndexRef.current)); const delay = naturalVariance ? getRandomTypingDelay(typingSpeed) : typingSpeed; schedule(typeNextCharRef.current, delay); } else { const pause = seq.pauseAfter ?? pauseBeforeDelete; if (seq.deleteAfter !== false) { schedule(() => deleteCharRef.current(), pause); } else { schedule(() => { const isLast = sequenceIndexRef.current === sequencesRef.current.length - 1; if (isLast && autoLoop) { sequenceIndexRef.current = 0; charIndexRef.current = 0; setDisplayText(''); typeNextCharRef.current(); } else if (!isLast) { sequenceIndexRef.current += 1; charIndexRef.current = 0; setDisplayText(''); typeNextCharRef.current(); } }, loopDelay); } } }, [ typingSpeed, naturalVariance, pauseBeforeDelete, autoLoop, loopDelay, schedule, ]); const deleteChar = useCallback(() => { if (charIndexRef.current > 0) { charIndexRef.current -= 1; const text = sequencesRef.current[sequenceIndexRef.current]?.text ?? ''; setDisplayText(text.slice(0, charIndexRef.current)); schedule(deleteCharRef.current, deleteSpeed); } else { const isLast = sequenceIndexRef.current === sequencesRef.current.length - 1; if (isLast && autoLoop) { schedule(() => { sequenceIndexRef.current = 0; typeNextCharRef.current(); }, loopDelay); } else if (!isLast) { schedule(() => { sequenceIndexRef.current += 1; typeNextCharRef.current(); }, 80); } } }, [deleteSpeed, autoLoop, loopDelay, schedule]); useLayoutEffect(() => { typeNextCharRef.current = typeNextChar; deleteCharRef.current = deleteChar; }); const startAnimation = useCallback(() => { sequenceIndexRef.current = 0; charIndexRef.current = 0; schedule(() => { setDisplayText(''); typeNextCharRef.current(); }, startDelay); }, [startDelay, schedule]); useEffect(() => { startAnimation(); return () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); }; }, [sequences, typingSpeed, deleteSpeed, naturalVariance, startAnimation]); return ( {displayText} ); } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"registryDependencies":[]}]]}],["$","$L52",null,{"sourceUrl":"https://www.odysseyui.com/r/components-texts-typewriter.json","proxyUrl":"https://shadcnregistry.com/r/odysseyui/components-texts-typewriter","itemId":"@odysseyui/components-texts-typewriter"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/components/texts/typewriter/index.tsx","content":"$54","type":"registry:ui","target":"components/odysseyui/typewriter.tsx"}]}]]}],"$L55"]}]

Typewriter

Installation

Files

components

Styles