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:T29c1,'use client'; import React, { Children, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import './ScrollReveal.css'; gsap.registerPlugin(ScrollTrigger); const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect; const SCRUB_SPAN = 0.5; const RISE_MASK = 'inset(-1em -1em -0.15em -1em)'; type RevealSplit = 'words' | 'chars' | 'lines'; type RevealEffect = 'fade' | 'rise' | 'flip' | 'scale'; type RevealMode = 'scrub' | 'enter'; interface ScrollRevealProps { children: ReactNode; scrollContainerRef?: RefObject; enableBlur?: boolean; baseOpacity?: number; baseRotation?: number; blurStrength?: number; baseOffset?: number; stagger?: number; smoothing?: number; splitBy?: RevealSplit; effect?: RevealEffect; mode?: RevealMode; duration?: number; highlightColor?: string; containerClassName?: string; textClassName?: string; rotationEnd?: string; wordAnimationEnd?: string; } interface RevealLook { effect: RevealEffect; masked: boolean; baseOpacity: number; blur: number; offset: number; highlightColor: string; } 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 smooth = (value: number) => value * value * (3 - 2 * value); const easeOut = (value: number) => 1 - Math.pow(1 - value, 3); const easeBack = (value: number, overshoot: number) => { const shifted = value - 1; return 1 + (overshoot + 1) * shifted * shifted * shifted + overshoot * shifted * shifted; }; const glowAt = (t: number) => (t <= 0 || t >= 1 ? 0 : t < 0.35 ? smooth(t / 0.35) : 1 - smooth((t - 0.35) / 0.65)); const paintPiece = (piece: HTMLElement, t: number, look: RevealLook) => { let reveal = t; let fadeIn = t; let motion = ''; if (look.effect === 'rise') { reveal = easeOut(t); fadeIn = clamp01(reveal * 1.25); if (reveal < 1) { motion = look.masked ? `translateY(${((1 - reveal) * 100).toFixed(2)}%) translateY(${((1 - reveal) * 0.2).toFixed(3)}em)` : `translateY(${((1 - reveal) * 0.8).toFixed(3)}em)`; } } else if (look.effect === 'flip') { reveal = easeBack(t, 1.2); fadeIn = clamp01(t * 2); if (t < 1) motion = `perspective(6em) rotateX(${((1 - reveal) * 90).toFixed(2)}deg)`; } else if (look.effect === 'scale') { reveal = easeBack(t, 1.6); fadeIn = clamp01(t * 1.6); if (t < 1) motion = `scale(${(0.35 + 0.65 * reveal).toFixed(4)})`; } if (look.highlightColor) fadeIn = Math.max(fadeIn, clamp01(t / 0.35)); const settle = clamp01(reveal); const lift = look.offset * (1 - settle); piece.style.opacity = t >= 1 ? '' : (look.baseOpacity + (1 - look.baseOpacity) * fadeIn).toFixed(3); piece.style.transform = [lift ? `translateY(${lift.toFixed(2)}px)` : '', motion].filter(Boolean).join(' '); piece.style.filter = look.blur && settle < 1 ? `blur(${(look.blur * (1 - settle)).toFixed(2)}px)` : ''; if (look.highlightColor) { const glow = glowAt(t); piece.style.color = glow > 0.002 ? `color-mix(in srgb, ${look.highlightColor} ${(glow * 100).toFixed(1)}%, currentColor)` : ''; } }; const ScrollReveal: React.FC = ({ children, scrollContainerRef, enableBlur = true, baseOpacity = 0.1, baseRotation = 3, blurStrength = 4, baseOffset = 0, stagger = 0.05, smoothing = 0, splitBy = 'words', effect = 'fade', mode = 'scrub', duration = 0.8, highlightColor = '', containerClassName = '', textClassName = '', rotationEnd = 'bottom bottom', wordAnimationEnd = 'bottom bottom' }) => { 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 splitText = useMemo(() => { if (text === null) return null; return text.split(/(\s+)/).map((word, index) => word.trim() === '' ? ( word ) : ( {splitBy === 'chars' ? ( Array.from(word).map((char, charIndex) => ( {char} )) ) : ( {word} )} ) ); }, [text, splitBy]); 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 wrappers = Array.from(el.querySelectorAll('.scroll-reveal-word')); const pieces = wrappers.length ? Array.from(el.querySelectorAll('.scroll-reveal-piece')) : [textEl]; const viewportHeight = () => (scroller instanceof HTMLElement ? scroller.clientHeight : window.innerHeight); const scrub = smoothing > 0 ? smoothing : true; const span = mode === 'enter' ? Math.max(0.05, duration) : SCRUB_SPAN; const gap = Math.max(0, stagger); const look: RevealLook = { effect, masked: effect === 'rise' && wrappers.length > 0, baseOpacity, blur: enableBlur ? blurStrength : 0, offset: baseOffset, highlightColor }; const mm = gsap.matchMedia(); mm.add('(prefers-reduced-motion: no-preference)', () => { const order = pieces.map((_, index) => index); const last = pieces.map(() => -1); const state = { p: 0 }; let count = pieces.length; const measure = () => { if (splitBy !== 'lines' || !wrappers.length) return; let line = -1; let top = -Infinity; wrappers.forEach((wrapper, index) => { const next = wrapper.offsetTop; if (Math.abs(next - top) > 2) { line += 1; top = next; } order[index] = line; }); count = line + 1; }; const total = () => span + Math.max(0, count - 1) * gap; const render = () => { const at = state.p * total(); pieces.forEach((piece, index) => { const t = clamp01((at - order[index] * gap) / span); if (t === last[index]) return; last[index] = t; paintPiece(piece, t, look); }); }; measure(); pieces.forEach(piece => { piece.style.willChange = pieces.length > 80 ? '' : effect === 'fade' && !baseOffset ? 'opacity' : 'opacity, transform'; piece.style.transformOrigin = effect === 'flip' ? '50% 100%' : ''; }); if (look.masked) { wrappers.forEach(wrapper => { wrapper.style.clipPath = RISE_MASK; }); } render(); if (mode === 'enter') { let played = false; const play = () => { if (played) return; played = true; gsap.to(state, { p: 1, duration: total(), ease: 'none', onUpdate: render }); if (baseRotation) gsap.to(el, { rotate: 0, duration: Math.min(total(), 1.4), ease: 'power3.out' }); }; const startAt = () => { const view = viewportHeight(); const top = el.getBoundingClientRect().top - (scroller instanceof HTMLElement ? scroller.getBoundingClientRect().top + scroller.clientTop - scroller.scrollTop : -window.scrollY); const raw = top - view + 0.2 * Math.min(el.offsetHeight, view); return Math.min(raw, ScrollTrigger.maxScroll(scroller) - 1); }; if (baseRotation) gsap.set(el, { transformOrigin: '0% 50%', rotate: baseRotation }); ScrollTrigger.create({ trigger: el, scroller, start: startAt, onEnter: play, onLeave: play, onRefresh: (self: ScrollTrigger) => { if (self.progress > 0) play(); } }); } else { if (baseRotation) { gsap.fromTo( el, { transformOrigin: '0% 50%', rotate: baseRotation }, { ease: 'none', rotate: 0, scrollTrigger: { trigger: el, scroller, start: 'top bottom', end: clampToScroll(rotationEnd), scrub } } ); } gsap.to(state, { p: 1, ease: 'none', onUpdate: render, scrollTrigger: { trigger: el, scroller, start: () => `top bottom-=${0.2 * Math.min(el.offsetHeight, viewportHeight())}`, end: clampToScroll(wordAnimationEnd), scrub } }); } const resizeObserver = splitBy === 'lines' && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => { measure(); last.fill(-1); render(); }) : null; resizeObserver?.observe(textEl); return () => { resizeObserver?.disconnect(); pieces.forEach(piece => { piece.style.opacity = ''; piece.style.transform = ''; piece.style.transformOrigin = ''; piece.style.filter = ''; piece.style.color = ''; piece.style.willChange = ''; }); wrappers.forEach(wrapper => { wrapper.style.clipPath = ''; }); }; }); return () => mm.revert(); }, [ mounted, scrollContainerRef, text, splitBy, effect, mode, duration, highlightColor, enableBlur, baseOpacity, baseRotation, blurStrength, baseOffset, stagger, smoothing, rotationEnd, wordAnimationEnd ]); return (

{splitText ?? children}

); }; export default ScrollReveal; 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","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ScrollReveal.css","content":".scroll-reveal {\n margin: 20px 0;\n}\n\n.scroll-reveal-text {\n display: block;\n font-size: clamp(1.6rem, 4vw, 3rem);\n line-height: 1.5;\n font-weight: 600;\n}\n\n.scroll-reveal-word,\n.scroll-reveal-piece {\n display: inline-block;\n}\n","type":"registry:file","target":"@components/ScrollReveal.css"},{"path":"ScrollReveal.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]