51: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"] 52: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"] 53:T33ea,'use client'; import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react'; import { motion, AnimatePresence, MotionConfig, animate as animateValue, useMotionValue, useReducedMotion, type AnimationPlaybackControls, type Transition, type VariantLabels, type Target, type TargetAndTransition } from 'motion/react'; import './RotatingText.css'; function cn(...classes: (string | undefined | null | boolean)[]): string { return classes.filter(Boolean).join(' '); } const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect; const segmenter = typeof Intl !== 'undefined' && Intl.Segmenter ? new Intl.Segmenter('en', { granularity: 'grapheme' }) : null; const splitIntoCharacters = (text: string): string[] => segmenter ? Array.from(segmenter.segment(text), segment => segment.segment) : Array.from(text); const withFilter = (state: T, filter: string): T => state && typeof state === 'object' && !Array.isArray(state) ? ({ ...state, filter } as T) : state; export type RotatingTextEffect = 'slide' | 'flip' | 'blur' | 'scale' | 'drop'; export interface RotatingTextRef { next: () => void; previous: () => void; jumpTo: (index: number) => void; reset: () => void; } export interface RotatingTextProps extends Omit< React.ComponentPropsWithoutRef, 'children' | 'transition' | 'initial' | 'animate' | 'exit' > { texts: string[]; transition?: Transition; initial?: boolean | Target | VariantLabels; animate?: boolean | VariantLabels | TargetAndTransition; exit?: Target | VariantLabels; effect?: RotatingTextEffect; direction?: 'up' | 'down'; highlight?: boolean; highlightColor?: string; animatePresenceMode?: 'sync' | 'wait'; animatePresenceInitial?: boolean; rotationInterval?: number; staggerDuration?: number; staggerFrom?: 'first' | 'last' | 'center' | 'random' | number; loop?: boolean; auto?: boolean; pauseOnHover?: boolean; blur?: number; splitBy?: string; onNext?: (index: number) => void; mainClassName?: string; splitLevelClassName?: string; elementLevelClassName?: string; } interface EffectPreset { initial: Target; animate: Target; exit: Target; transition: Transition; exitTransition?: Transition; } const LAYOUT_SPRING: Transition = { type: 'spring', damping: 25, stiffness: 300 }; const WIDTH_SPRING: Transition = { type: 'spring', damping: 34, stiffness: 320 }; const FLIP_STYLE: React.CSSProperties = { transformOrigin: '50% 50% -0.45em', backfaceVisibility: 'hidden' }; const EFFECTS: Record EffectPreset> = { slide: up => ({ initial: { y: up ? '100%' : '-100%', opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: up ? '-120%' : '120%', opacity: 0 }, transition: { type: 'spring', damping: 25, stiffness: 300 } }), flip: up => ({ initial: { rotateX: up ? -90 : 90, opacity: 0, transformPerspective: 480 }, animate: { rotateX: 0, opacity: 1, transformPerspective: 480 }, exit: { rotateX: up ? 90 : -90, opacity: 0, transformPerspective: 480 }, transition: { type: 'tween', duration: 0.6, ease: [0.34, 1.4, 0.64, 1] }, exitTransition: { type: 'tween', duration: 0.32, ease: [0.5, 0, 0.75, 0] } }), blur: up => ({ initial: { y: up ? '45%' : '-45%', opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: up ? '-45%' : '45%', opacity: 0 }, transition: { type: 'tween', duration: 0.55, ease: [0.22, 1, 0.36, 1] } }), scale: up => ({ initial: { scale: up ? 0.35 : 1.7, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: up ? 1.7 : 0.35, opacity: 0 }, transition: { type: 'spring', damping: 17, stiffness: 240 } }), drop: () => ({ initial: { y: '-110%', opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: '110%', opacity: 0 }, transition: { type: 'spring', damping: 18, stiffness: 320, mass: 0.9 }, exitTransition: { type: 'tween', duration: 0.3, ease: [0.55, 0, 1, 0.45] } }) }; const readableText = (color: string): string | undefined => { const value = String(color ?? '').trim(); let rgb: number[] | null = null; const hex = value.match(/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i); if (hex) { const digits = hex[1].length < 6 ? [...hex[1].slice(0, 3)].map(c => c + c).join('') : hex[1].slice(0, 6); rgb = [0, 2, 4].map(i => parseInt(digits.slice(i, i + 2), 16)); } else { const fn = value.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i); if (fn) rgb = fn.slice(1, 4).map(Number); } if (!rgb) return undefined; const [r, g, b] = rgb.map(channel => { const c = Math.min(Math.max(channel / 255, 0), 1); return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.3 ? '#0b0b0c' : '#ffffff'; }; const RotatingText = forwardRef((props, ref) => { const { texts, transition, initial, animate, exit, effect = 'slide', direction = 'up', highlight = false, highlightColor = '#a855f7', animatePresenceMode = 'wait', animatePresenceInitial = false, rotationInterval = 2000, staggerDuration = 0, staggerFrom = 'first', loop = true, auto = true, pauseOnHover = false, blur = 0, splitBy = 'characters', onNext, onMouseEnter, onMouseLeave, mainClassName, splitLevelClassName, elementLevelClassName, style, ...rest } = props; const [currentTextIndex, setCurrentTextIndex] = useState(0); const [hovered, setHovered] = useState(false); const indexRef = useRef(0); const onNextRef = useRef(onNext); onNextRef.current = onNext; const contentRef = useRef(null); const width = useMotionValue('auto'); const reduceMotion = useReducedMotion(); const lastIndex = Math.max(texts.length - 1, 0); const activeIndex = Math.min(currentTextIndex, lastIndex); const elements = useMemo(() => { const currentText: string = texts[activeIndex] ?? ''; if (splitBy === 'characters') { const words = currentText.split(' '); return words.map((word, i) => ({ characters: splitIntoCharacters(word), needsSpace: i !== words.length - 1 })); } if (splitBy === 'words') { return currentText.split(' ').map((word, i, arr) => ({ characters: [word], needsSpace: i !== arr.length - 1 })); } if (splitBy === 'lines') { return currentText.split('\n').map((line, i, arr) => ({ characters: [line], needsSpace: i !== arr.length - 1 })); } return currentText.split(splitBy).map((part, i, arr) => ({ characters: [part], needsSpace: i !== arr.length - 1 })); }, [texts, activeIndex, splitBy]); const order = useMemo(() => { const total = elements.reduce((sum, word) => sum + word.characters.length, 0); const shuffled = Array.from({ length: total }, (_, i) => i).sort(() => Math.random() - 0.5); return { total, shuffled }; }, [elements]); const getStaggerDelay = (index: number): number => { const { total, shuffled } = order; if (staggerFrom === 'first') return index * staggerDuration; if (staggerFrom === 'last') return (total - 1 - index) * staggerDuration; if (staggerFrom === 'center') return Math.abs(Math.floor(total / 2) - index) * staggerDuration; if (staggerFrom === 'random') return shuffled[index] * staggerDuration; return Math.abs((staggerFrom as number) - index) * staggerDuration; }; const goTo = useCallback((index: number) => { if (index === indexRef.current) return; indexRef.current = index; setCurrentTextIndex(index); onNextRef.current?.(index); }, []); const next = useCallback(() => { const current = Math.min(indexRef.current, lastIndex); goTo(current < lastIndex ? current + 1 : loop ? 0 : current); }, [lastIndex, loop, goTo]); const previous = useCallback(() => { const current = Math.min(indexRef.current, lastIndex); goTo(current > 0 ? current - 1 : loop ? lastIndex : current); }, [lastIndex, loop, goTo]); const jumpTo = useCallback((index: number) => goTo(Math.max(0, Math.min(index, lastIndex))), [lastIndex, goTo]); const reset = useCallback(() => goTo(0), [goTo]); useImperativeHandle( ref, () => ({ next, previous, jumpTo, reset }), [next, previous, jumpTo, reset] ); const paused = pauseOnHover && hovered; useEffect(() => { if (!auto || paused) return; const timeoutId = setTimeout(next, rotationInterval); return () => clearTimeout(timeoutId); }, [next, rotationInterval, auto, paused, activeIndex]); useIsomorphicLayoutEffect(() => { const content = contentRef.current; if (!highlight || !content) { width.set('auto'); return undefined; } let controls: AnimationPlaybackControls | null = null; let settled = false; const fit = () => { const target = content.offsetWidth + 1; controls?.stop(); if (!settled || reduceMotion) { settled = true; width.set(target); return; } controls = animateValue(width, target, WIDTH_SPRING); }; fit(); const observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(fit) : null; observer?.observe(content); return () => { observer?.disconnect(); controls?.stop(); }; }, [highlight, reduceMotion, width]); const handleMouseEnter = (event: React.MouseEvent) => { if (pauseOnHover) setHovered(true); onMouseEnter?.(event); }; const handleMouseLeave = (event: React.MouseEvent) => { setHovered(false); onMouseLeave?.(event); }; const motionPreset: EffectPreset = (EFFECTS[effect] ?? EFFECTS.slide)(direction !== 'down'); const blurAmount = blur > 0 ? blur : effect === 'blur' ? 10 : 0; const enterState: boolean | Target | VariantLabels = initial ?? motionPreset.initial; const restState: boolean | VariantLabels | TargetAndTransition = animate ?? motionPreset.animate; const leaveState: Target | VariantLabels = exit ?? motionPreset.exit; const charTransition = transition ?? motionPreset.transition; const exitTransition = transition || exit ? null : motionPreset.exitTransition; const enterFrom = blurAmount > 0 ? withFilter(enterState, `blur(${blurAmount}px)`) : enterState; const enterTo = blurAmount > 0 ? withFilter(restState, 'blur(0px)') : restState; const leaveTo = blurAmount > 0 ? withFilter(leaveState, `blur(${blurAmount}px)`) : leaveState; const charStyle = effect === 'flip' ? FLIP_STYLE : undefined; const blockStyle = highlight ? { ...style, width, backgroundColor: highlightColor, color: readableText(highlightColor) ?? style?.color } : style; const presence = ( {elements.map((wordObj, wordIndex, array) => { const previousCharsCount = array.slice(0, wordIndex).reduce((sum, word) => sum + word.characters.length, 0); return ( {wordObj.characters.map((char, charIndex) => { const delay = getStaggerDelay(previousCharsCount + charIndex); return ( {char} ); })} {wordObj.needsSpace && } ); })} ); return ( {texts[activeIndex]} {highlight ? ( {presence} ) : ( presence )} ); }); RotatingText.displayName = 'RotatingText'; export default RotatingText; 50:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion@^12.23.12",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"motion@^12.23.12"}]]}]}]]}],["$","$L51",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"RotatingText.css","content":".text-rotate {\n display: flex;\n flex-wrap: wrap;\n white-space: pre-wrap;\n position: relative;\n}\n\n.text-rotate-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.text-rotate-word {\n display: inline-flex;\n}\n\n.text-rotate-lines {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.text-rotate-element {\n display: inline-block;\n}\n\n.text-rotate-space {\n white-space: pre;\n}\n\n.text-rotate-highlight {\n box-sizing: content-box;\n flex-wrap: nowrap;\n justify-content: center;\n overflow: hidden;\n padding: 0.1em 0.28em;\n border-radius: 0.16em;\n}\n\n.text-rotate-highlight-content {\n display: flex;\n flex-shrink: 0;\n white-space: pre;\n}\n","type":"registry:file","target":"@components/RotatingText.css"},{"path":"RotatingText.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]