4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T5e5,'use client' import * as React from 'react' import { cn } from '@/lib/utils' import { useTypewriter } from '@/hooks/use-typewriter' export interface TypewriterProps extends React.ComponentPropsWithRef<'span'> { texts: readonly string[] msPerChar?: number pauseMs?: number deleteMsPerChar?: number gapMs?: number loop?: boolean caret?: boolean } export function Typewriter({ texts, msPerChar = 60, pauseMs = 900, deleteMsPerChar = msPerChar, gapMs = 150, loop = true, caret = true, className, ref, ...props }: TypewriterProps) { const { visible, longestText, prefersReducedMotion } = useTypewriter({ texts, msPerChar, pauseMs, deleteMsPerChar, gapMs, loop, }) if (texts.length === 0) return null return ( {/* Size holder - only renders longest text */} {/* Visible text */} {visible} {caret && ( ) } 51:T16d7,'use client' import * as React from 'react' export interface UseTypewriterOptions { texts: readonly string[] msPerChar?: number pauseMs?: number deleteMsPerChar?: number gapMs?: number loop?: boolean } export interface UseTypewriterReturn { /** The currently visible text */ visible: string /** The longest text from the array (useful for sizing) */ longestText: string /** Current animation phase */ phase: 'type' | 'pause' | 'delete' | 'gap' /** Whether the typewriter is actively animating */ isAnimating: boolean /** Whether reduced motion is preferred */ prefersReducedMotion: boolean } function usePrefersReducedMotion(): boolean { const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false) React.useEffect(() => { const mql = window.matchMedia('(prefers-reduced-motion: reduce)') setPrefersReducedMotion(mql.matches) const handler = (event: MediaQueryListEvent) => { setPrefersReducedMotion(event.matches) } mql.addEventListener('change', handler) return () => mql.removeEventListener('change', handler) }, []) return prefersReducedMotion } export function useTypewriter({ texts, msPerChar = 60, pauseMs = 900, deleteMsPerChar = msPerChar, gapMs = 150, loop = true, }: UseTypewriterOptions): UseTypewriterReturn { const prefersReducedMotion = usePrefersReducedMotion() const [index, setIndex] = React.useState(0) const [count, setCount] = React.useState(0) const [phase, setPhase] = React.useState<'type' | 'pause' | 'delete' | 'gap'>( 'type' ) // Clamp index when texts array changes const safeIndex = Math.min(index, Math.max(0, texts.length - 1)) const text = texts[safeIndex] ?? '' const graphemes = React.useMemo(() => toGraphemes(text), [text]) // Reset state when texts array changes (reference equality) const textsKey = React.useMemo(() => texts.join('\0'), [texts]) React.useEffect(() => { setIndex(0) setCount(0) setPhase('type') }, [textsKey]) const isAnimatingRef = React.useRef(true) React.useEffect(() => { if (texts.length === 0) { isAnimatingRef.current = false return } // Skip animation when user prefers reduced motion if (prefersReducedMotion) { isAnimatingRef.current = false setCount(graphemes.length) setPhase('pause') return } isAnimatingRef.current = true let rafId: number let lastTime = performance.now() const animate = (currentTime: number) => { const elapsed = currentTime - lastTime // Handle empty strings if (graphemes.length === 0) { if (phase === 'type') { setPhase('pause') lastTime = currentTime } else if (phase === 'pause' && elapsed >= pauseMs) { setPhase('delete') lastTime = currentTime } else if (phase === 'delete') { const isLast = safeIndex + 1 >= texts.length if (isLast && !loop) { isAnimatingRef.current = false return } setIndex(isLast ? 0 : safeIndex + 1) setPhase('gap') lastTime = currentTime } else if (phase === 'gap' && elapsed >= gapMs) { setPhase('type') lastTime = currentTime } if (phase === 'pause' || phase === 'gap') { rafId = requestAnimationFrame(animate) } return } // Normal animation flow if (phase === 'type' && count < graphemes.length) { if (elapsed >= msPerChar) { lastTime = currentTime setCount((c) => c + 1) } rafId = requestAnimationFrame(animate) } else if (phase === 'type' && count >= graphemes.length) { setPhase('pause') lastTime = currentTime } else if (phase === 'pause') { if (elapsed >= pauseMs) { setPhase('delete') lastTime = currentTime } else { rafId = requestAnimationFrame(animate) } } else if (phase === 'delete' && count > 0) { if (elapsed >= deleteMsPerChar) { lastTime = currentTime setCount((c) => c - 1) } rafId = requestAnimationFrame(animate) } else if (phase === 'delete' && count === 0) { const isLast = safeIndex + 1 >= texts.length if (isLast && !loop) { isAnimatingRef.current = false return } setIndex(isLast ? 0 : safeIndex + 1) setCount(0) setPhase('gap') lastTime = currentTime } else if (phase === 'gap') { if (elapsed >= gapMs) { setPhase('type') lastTime = currentTime } else { rafId = requestAnimationFrame(animate) } } } rafId = requestAnimationFrame(animate) return () => { cancelAnimationFrame(rafId) isAnimatingRef.current = false } }, [ phase, count, graphemes.length, safeIndex, texts.length, loop, msPerChar, deleteMsPerChar, pauseMs, gapMs, prefersReducedMotion, ]) const longestText = React.useMemo( () => texts.reduce((a, b) => (a.length > b.length ? a : b), ''), [texts] ) const visible = React.useMemo( () => graphemes.slice(0, count).join(''), [graphemes, count] ) return { visible, longestText, phase, isAnimating: isAnimatingRef.current, prefersReducedMotion, } } /** Split text into grapheme clusters for proper emoji/unicode handling */ function toGraphemes(str: string): string[] { if (typeof Intl !== 'undefined' && Intl.Segmenter) { const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' }) return [...segmenter.segment(str)].map((s) => s.segment) } // Fallback for older environments - spread handles most cases return [...str] } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@joyco","registryDependencies":["@joyco/utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/components/typewriter.tsx","content":"$50","type":"registry:component"},{"path":"hooks/use-typewriter.ts","content":"$51","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]