50: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"] 51: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"] 52:T25b5,'use client'; import React, { Children, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode, type RefObject } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect; type ScrollFloatEffect = 'float' | 'flip' | 'scatter' | 'blur' | 'wave'; type ScrollFloatSplit = 'chars' | 'words'; type ScrollFloatDirection = 'up' | 'down'; type ScrollFloatOrder = 'start' | 'end' | 'center' | 'edges' | 'random'; interface ScrollFloatProps { children: ReactNode; scrollContainerRef?: RefObject; containerClassName?: string; textClassName?: string; effect?: ScrollFloatEffect; splitBy?: ScrollFloatSplit; direction?: ScrollFloatDirection; order?: ScrollFloatOrder; fromColor?: string; animationDuration?: number; ease?: string; scrollStart?: string; scrollEnd?: string; stagger?: number; distance?: number; stretch?: number; smoothing?: number; } const clampToScroll = (position: string) => typeof position === 'string' && !position.startsWith('clamp(') ? `clamp(${position})` : position; const clamp01 = (value: number) => Math.min(Math.max(value, 0), 1); const smoothstep = (from: number, to: number, value: number) => { const k = clamp01((value - from) / (to - from)); return k * k * (3 - 2 * k); }; const random = (index: number, salt: number) => { const value = Math.sin((index + 1) * 12.9898 + salt * 78.233) * 43758.5453; return value - Math.floor(value); }; const getDelays = (count: number, order: ScrollFloatOrder, stagger: number) => { const middle = (count - 1) / 2; const ranks = Array.from({ length: count }, (_, index) => { if (order === 'end') return count - 1 - index; if (order === 'center') return Math.abs(index - middle); if (order === 'edges') return middle - Math.abs(index - middle); return index; }); if (order === 'random') { const shuffled = ranks.map((_, index) => index).sort((a, b) => random(a, 9) - random(b, 9)); shuffled.forEach((target, rank) => { ranks[target] = rank; }); } const first = Math.min(...ranks); return ranks.map(rank => (rank - first) * Math.max(0, stagger)); }; const ScrollFloat: React.FC = ({ children, scrollContainerRef, containerClassName = '', textClassName = '', effect = 'float', splitBy = 'chars', direction = 'up', order = 'start', fromColor = 'currentColor', animationDuration = 1, ease = 'back.inOut(2)', scrollStart = 'center bottom+=50%', scrollEnd = 'bottom bottom-=40%', stagger = 0.03, distance = 120, stretch = 2.3, smoothing = 0 }) => { const containerRef = useRef(null); const textRef = useRef(null); const text = useMemo(() => { const parts = Children.toArray(children); return parts.every(part => typeof part === 'string' || typeof part === 'number') ? parts.join('') : null; }, [children]); const shiftColor = fromColor && fromColor !== 'currentColor' ? fromColor : null; const shiftStyle = useMemo( () => shiftColor ? { color: `color-mix(in oklab, ${shiftColor} calc(var(--scroll-float-mix, 0) * 100%), currentColor)` } : undefined, [shiftColor] ); const splitText = useMemo(() => { if (text === null) return null; return text.split(/(\s+)/).map((word, wordIndex) => word.trim() === '' ? ( word ) : ( {Array.from(word).map((char, charIndex) => ( {char} ))} ) ); }, [text, shiftStyle]); const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); useIsomorphicLayoutEffect(() => { const el = containerRef.current; const textEl = textRef.current; if (!el || !textEl) return; if (scrollContainerRef && !scrollContainerRef.current) return; const scroller = scrollContainerRef?.current || window; const pieces = el.querySelectorAll(splitBy === 'words' ? '[data-word]' : '[data-char]'); const targets: HTMLElement[] = pieces.length ? Array.from(pieces) : [textEl]; const indexOf = new Map(targets.map((target, index) => [target, index])); const at = (fn: (index: number) => number) => (_: number, target: Element) => fn(indexOf.get(target) ?? 0); const middle = (targets.length - 1) / 2; const edge = (index: number) => (middle > 0 ? (index - middle) / middle : 0); const delays = getDelays(targets.length, order, stagger); const sign = direction === 'down' ? -1 : 1; const reach = Math.max(0, Number(distance) || 0) / 120; const squeeze = stretch > 0 ? stretch ** -0.43 : 1; const baseEase = gsap.parseEase(ease) || ((p: number) => p); const timing = (p: number) => clamp01(baseEase(p)); const size = () => parseFloat(getComputedStyle(textEl).fontSize) || 16; const swell = (p: number) => { const t = timing(p); return 1 - Math.cos(t * Math.PI * 2.5) * Math.pow(1 - t, 2.6); }; const sway = (p: number) => { const t = timing(p); return Math.sin(t * Math.PI * 2.5) * Math.pow(1 - t, 2.6); }; const mm = gsap.matchMedia(); mm.add('(prefers-reduced-motion: no-preference)', () => { const timeline = gsap.timeline({ scrollTrigger: { trigger: el, scroller, start: scrollStart, end: clampToScroll(scrollEnd), scrub: smoothing > 0 ? smoothing : true, invalidateOnRefresh: true } }); const add = (fromVars: gsap.TweenVars, toVars: gsap.TweenVars) => { gsap.set(targets, { willChange: 'opacity, transform', ...fromVars }); return timeline.fromTo( targets, { willChange: 'opacity, transform', ...fromVars }, { duration: animationDuration, stagger: (index: number) => delays[index] || 0, ...toVars }, 0 ); }; if (effect === 'flip') { add( { rotationX: -90 * sign, transformPerspective: () => size() * 4, transformOrigin: () => `50% 50% ${(-size() * 0.55 * reach).toFixed(2)}`, backfaceVisibility: 'hidden' }, { ease, rotationX: 0 } ); add({ opacity: 0 }, { ease: (p: number) => smoothstep(0.05, 0.55, timing(p)), opacity: 1 }); } else if (effect === 'scatter') { add( { x: at(index => ((random(index, 1) * 2 - 1) * 1.3 - edge(index) * 0.9) * size() * reach), y: at(index => sign * (0.35 + random(index, 2)) * size() * 1.1 * reach), rotation: at(index => (random(index, 3) < 0.5 ? -1 : 1) * (40 + random(index, 4) * 120)), scale: at(index => 0.35 + random(index, 5) * 0.9), transformOrigin: '50% 50%' }, { ease, x: 0, y: 0, rotation: 0, scale: 1 } ); add({ opacity: 0 }, { ease: (p: number) => smoothstep(0, 0.4, timing(p)), opacity: 1 }); } else if (effect === 'blur') { add( { willChange: 'opacity, transform, filter', opacity: 0, y: () => sign * size() * 0.3 * reach, scale: 1.45, filter: () => `blur(${(size() * 0.2).toFixed(2)}px)`, transformOrigin: '50% 50%' }, { ease, opacity: 1, y: 0, scale: 1, filter: 'blur(0px)' } ); } else if (effect === 'wave') { add( { yPercent: 120 * reach * sign, scaleY: stretch, scaleX: squeeze, transformOrigin: sign > 0 ? '50% 100%' : '50% 0%' }, { ease: swell, yPercent: 0, scaleY: 1, scaleX: 1 } ); add({ rotation: 0 }, { ease: sway, rotation: -16 * sign }); add({ opacity: 0 }, { ease: (p: number) => clamp01(timing(p) * 2.5), opacity: 1 }); } else { add( { opacity: 0, yPercent: 120 * reach * sign, scaleY: stretch, scaleX: squeeze, transformOrigin: sign > 0 ? '50% 0%' : '50% 100%' }, { ease, opacity: 1, yPercent: 0, scaleY: 1, scaleX: 1 } ); } if (shiftColor) { add( { '--scroll-float-mix': 1 }, { ease: (p: number) => smoothstep(0.5, 1, timing(p)), '--scroll-float-mix': 0 } ); } }); return () => mm.revert(); }, [ mounted, scrollContainerRef, text, effect, splitBy, direction, order, shiftColor, animationDuration, ease, scrollStart, scrollEnd, stagger, distance, stretch, smoothing ]); return (

{text !== null && {text}} {splitText ?? children}

); }; export default ScrollFloat; 4f:["$","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","gsap@^3.13.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","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":"gsap@^3.13.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ScrollFloat/ScrollFloat.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]