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:T3a1f,'use client'; import { useEffect, useLayoutEffect, useMemo, useRef, type CSSProperties, type ReactNode } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); type SplitBy = 'char' | 'word' | 'line'; type Hinge = 'top' | 'bottom' | 'left' | 'right'; type Trigger = 'mount' | 'hover' | 'scroll' | 'loop'; type StaggerFrom = 'start' | 'center' | 'end' | 'edges' | 'random'; type FoldStyle = 'paper' | 'blinds' | 'flip'; type Axis = 'rotateX' | 'rotateY'; export interface FoldTextProps { text?: string; splitBy?: SplitBy; hinge?: Hinge; foldStyle?: FoldStyle; duration?: number; stagger?: number; staggerFrom?: StaggerFrom; foldAngle?: number; ease?: string; perspective?: number; creaseShading?: number; trigger?: Trigger; loopDelay?: number; hoverRefold?: boolean; refoldRadius?: number; refoldAngle?: number; fontSize?: string | number; fontWeight?: string | number; color?: string; className?: string; style?: CSSProperties; } type HingeConfig = { origin: string; axis: Axis; sign: number; originClass: string; shadeClass: string; }; type Piece = { element: HTMLElement; parts: HTMLElement[]; t: number; f: number; r: number; aim: number; }; type Point = { x: number; y: number }; const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect; const HINGES: Record = { top: { origin: '50% 0%', axis: 'rotateX', sign: -1, originClass: 'origin-top', shadeClass: 'after:bg-[linear-gradient(180deg,rgba(0,0,0,0.58)_0%,rgba(0,0,0,0.22)_42%,rgba(255,255,255,0.26)_100%)]' }, bottom: { origin: '50% 100%', axis: 'rotateX', sign: 1, originClass: 'origin-bottom', shadeClass: 'after:bg-[linear-gradient(0deg,rgba(0,0,0,0.58)_0%,rgba(0,0,0,0.22)_42%,rgba(255,255,255,0.26)_100%)]' }, left: { origin: '0% 50%', axis: 'rotateY', sign: 1, originClass: 'origin-left', shadeClass: 'after:bg-[linear-gradient(90deg,rgba(0,0,0,0.58)_0%,rgba(0,0,0,0.22)_42%,rgba(255,255,255,0.26)_100%)]' }, right: { origin: '100% 50%', axis: 'rotateY', sign: -1, originClass: 'origin-right', shadeClass: 'after:bg-[linear-gradient(270deg,rgba(0,0,0,0.58)_0%,rgba(0,0,0,0.22)_42%,rgba(255,255,255,0.26)_100%)]' } }; const PIECE_CLASS = 'relative inline-block [backface-visibility:hidden] motion-reduce:[transform:none]!'; const BLINDS_CLASS = 'relative inline-block [perspective:var(--fold-perspective)]'; const SLAT_CLASS = 'inline-block [backface-visibility:hidden] motion-reduce:[transform:none]!'; const SHADE_CLASS = 'after:pointer-events-none after:absolute after:inset-0 after:content-[attr(data-fold-text)] after:text-transparent after:[-webkit-text-fill-color:transparent] after:bg-clip-text after:opacity-[var(--fold-crease,0)] motion-reduce:after:opacity-0!'; const SLATS: Record = { rotateX: { origins: ['50% 25%', '50% 75%'], clips: ['inset(-40% -20% 50% -20%)', 'inset(50% -20% -40% -20%)'] }, rotateY: { origins: ['25% 50%', '75% 50%'], clips: ['inset(-40% 50% -40% -20%)', 'inset(-40% -20% -40% 50%)'] } }; const FOLD_STYLES: FoldStyle[] = ['paper', 'blinds', 'flip']; const SLAT_DELAY = 0.24; const clamp = (value: number, min: number, max: number): number => Math.min(max, Math.max(min, value)); const FoldText = ({ text = 'Design unfolds', splitBy = 'char', hinge = 'top', foldStyle = 'paper', duration = 0.65, stagger = 0.045, staggerFrom = 'start', foldAngle = 92, ease = 'power3.out', perspective = 700, creaseShading = 0.55, trigger = 'mount', loopDelay = 1.4, hoverRefold = false, refoldRadius = 140, refoldAngle = 45, fontSize = 80, fontWeight = 800, color = 'currentColor', className = '', style = {} }: FoldTextProps) => { const rootRef = useRef(null); const safeHinge: Hinge = HINGES[hinge] ? hinge : 'top'; const hingeConfig = HINGES[safeHinge]; const safeStyle: FoldStyle = FOLD_STYLES.includes(foldStyle) ? foldStyle : 'paper'; const safeCrease = clamp(creaseShading, 0, 1); const safeAngle = clamp(foldAngle, 0, 180); const safeStagger = Math.max(0, stagger); const safeDelay = Math.max(0, loopDelay); const safeRadius = Math.max(1, refoldRadius); const safeRefold = clamp(refoldAngle, 0, 180); const startsFolded = trigger !== 'hover'; const segments = useMemo(() => { const { originClass, shadeClass } = HINGES[safeHinge]; const pieceClass = `${PIECE_CLASS} ${SHADE_CLASS} ${originClass} ${shadeClass}`; const slatClass = `${SLAT_CLASS} ${SHADE_CLASS} ${shadeClass}`; const renderPiece = (content: string, key: string, isLine = false): ReactNode => ( {safeStyle === 'blinds' ? ( {content} {content} ) : ( {content} )} ); if (splitBy === 'line') { return text.split('\n').map((line, index) => renderPiece(line || '\u00A0', `line-${index}`, true)); } return text.split(/(\s+)/).flatMap((part, partIndex): ReactNode[] => { if (!part) return []; if (/^\s+$/.test(part)) { return part .split('\n') .flatMap((spaces, lineIndex) => [lineIndex > 0 ?
: null, spaces]) .filter(Boolean); } if (splitBy === 'word') return [renderPiece(part, `word-${partIndex}`)]; return [ {Array.from(part).map((char, charIndex) => renderPiece(char, `char-${partIndex}-${charIndex}`))} ]; }); }, [text, splitBy, safeHinge, safeStyle, startsFolded]); useIsomorphicLayoutEffect(() => { const root = rootRef.current; if (!root) return undefined; const elements = Array.from(root.querySelectorAll('[data-fold-piece]')); if (!elements.length) return undefined; const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; const { axis, sign, origin } = hingeConfig; const slats = SLATS[axis]; const unfoldEase = gsap.parseEase(reduceMotion ? 'power1.out' : ease) || gsap.parseEase('power3.out'); const foldEase = gsap.parseEase(reduceMotion ? 'power1.in' : 'power2.in'); const angle = reduceMotion ? 0 : safeStyle === 'flip' ? 180 : safeAngle; const crease = reduceMotion ? 0 : safeCrease; const refold = hoverRefold && !reduceMotion ? safeRefold : 0; const lift = safeStyle === 'flip' && !reduceMotion ? 0.45 : 0; const unfoldDuration = reduceMotion ? Math.min(duration, 0.22) : duration; const staggerVars: gsap.StaggerVars = { each: reduceMotion ? Math.min(safeStagger, 0.02) : safeStagger, from: staggerFrom }; const pieces = elements.map((element): Piece => { const parts = safeStyle === 'blinds' ? (Array.from(element.children) as HTMLElement[]) : [element]; if (safeStyle === 'blinds') { element.style.opacity = '1'; parts.forEach((part, index) => { part.style.transformOrigin = slats.origins[index]; if (index > 0) part.style.clipPath = slats.clips[index]; }); } else { element.style.transformOrigin = safeStyle === 'flip' ? '50% 50%' : origin; element.style.backfaceVisibility = safeStyle === 'flip' ? 'visible' : ''; } return { element, parts, t: startsFolded ? 0 : 1, f: 0, r: 0, aim: 0 }; }); const shade = (progress: number, tilt: number) => String(crease * clamp(1 - progress + tilt / 90, 0, 1)); const render = () => { pieces.forEach(piece => { const tilt = piece.r * refold; if (safeStyle === 'blinds') { let resting = tilt < 0.05; piece.parts.forEach((part, index) => { const offset = index * SLAT_DELAY; const open = unfoldEase(clamp((piece.t - offset) / (1 - SLAT_DELAY), 0, 1)); const close = foldEase(clamp((piece.f - offset) / (1 - SLAT_DELAY), 0, 1)); const progress = open * (1 - close); if (Math.abs(1 - progress) > 0.002) resting = false; part.style.transform = `${axis}(${sign * ((1 - progress) * angle + tilt)}deg)`; part.style.opacity = String(clamp(progress, 0, 1)); part.style.setProperty('--fold-crease', shade(progress, tilt)); }); piece.parts[0].style.clipPath = resting ? 'none' : slats.clips[0]; piece.parts[1].style.visibility = resting ? 'hidden' : 'visible'; return; } const progress = unfoldEase(piece.t) * (1 - foldEase(piece.f)); const rise = lift * Math.sin(Math.PI * clamp(progress, 0, 1)); const turn = `${axis}(${sign * ((1 - progress) * angle + tilt)}deg)`; piece.element.style.transform = rise > 0.001 ? `translateZ(${rise}em) ${turn}` : turn; piece.element.style.opacity = String(clamp(progress, 0, 1)); piece.element.style.setProperty('--fold-crease', shade(progress, tilt)); }); }; let timeline: gsap.core.Timeline | null = null; let scrollTrigger: ScrollTrigger | null = null; const play = (loop: boolean) => { timeline?.kill(); timeline = gsap.timeline({ onUpdate: render, ...(loop ? { repeat: -1, repeatDelay: 0.35 } : {}) }); timeline.fromTo(pieces, { t: 0, f: 0 }, { t: 1, duration: unfoldDuration, ease: 'none', stagger: staggerVars }); if (loop) { timeline.to( pieces, { f: 1, duration: unfoldDuration * 0.75, ease: 'none', stagger: staggerVars }, `+=${safeDelay}` ); } render(); }; const handleEnter = () => play(false); if (trigger === 'hover') { render(); root.addEventListener('mouseenter', handleEnter); } else if (trigger === 'scroll') { render(); scrollTrigger = ScrollTrigger.create({ trigger: root, start: 'top 82%', once: true, onEnter: handleEnter }); } else { play(trigger === 'loop'); } let pointer: Point | null = null; let centers: Point[] | null = null; let measured: { width: number; height: number } | null = null; let relaxing = false; const measure = (box: DOMRect) => { centers = pieces.map(piece => { const rect = (piece.element.parentElement ?? piece.element).getBoundingClientRect(); return { x: rect.left - box.left + rect.width / 2, y: rect.top - box.top + rect.height / 2 }; }); measured = { width: box.width, height: box.height }; }; const relax = (time: number, deltaTime: number) => { const step = Math.min(deltaTime, 64) / 1000; let moving = false; pieces.forEach(piece => { const rate = piece.aim > piece.r ? 14 : 6; piece.r += (piece.aim - piece.r) * (1 - Math.exp(-rate * step)); if (Math.abs(piece.aim - piece.r) > 0.001) moving = true; else piece.r = piece.aim; }); render(); if (!moving) { gsap.ticker.remove(relax); relaxing = false; } }; const aim = () => { const box = root.getBoundingClientRect(); const near = pointer && pointer.x > box.left - safeRadius && pointer.x < box.right + safeRadius && pointer.y > box.top - safeRadius && pointer.y < box.bottom + safeRadius; if ( near && (!centers || !measured || Math.abs(box.width - measured.width) + Math.abs(box.height - measured.height) > 1) ) { measure(box); } let changed = false; pieces.forEach((piece, index) => { let value = 0; if (near && pointer && centers) { const center = centers[index]; const distance = Math.hypot(box.left + center.x - pointer.x, box.top + center.y - pointer.y) / safeRadius; if (distance < 1) value = 1 - distance * distance * (3 - 2 * distance); } if (value !== piece.aim) changed = true; piece.aim = value; }); if (changed && !relaxing) { relaxing = true; gsap.ticker.add(relax); } }; const handleMove = (event: PointerEvent) => { pointer = { x: event.clientX, y: event.clientY }; aim(); }; const handleLeave = () => { pointer = null; aim(); }; const handleScroll = () => { if (pointer) aim(); }; if (refold) { window.addEventListener('pointermove', handleMove, { passive: true }); window.addEventListener('scroll', handleScroll, { passive: true, capture: true }); document.documentElement.addEventListener('pointerleave', handleLeave); } return () => { root.removeEventListener('mouseenter', handleEnter); window.removeEventListener('pointermove', handleMove); window.removeEventListener('scroll', handleScroll, { capture: true }); document.documentElement.removeEventListener('pointerleave', handleLeave); gsap.ticker.remove(relax); scrollTrigger?.kill(); timeline?.kill(); gsap.killTweensOf(pieces); }; }, [ segments, hingeConfig, safeStyle, duration, safeStagger, staggerFrom, safeAngle, ease, safeCrease, trigger, safeDelay, hoverRefold, safeRadius, safeRefold, startsFolded ]); const rootStyle = { color, fontSize: typeof fontSize === 'number' ? `${fontSize}px` : fontSize, fontWeight, '--fold-perspective': `${Math.max(120, perspective)}px`, ...style } as CSSProperties; return ( {text} ); }; export default FoldText; 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":"FoldText/FoldText.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]