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:T9cf,.fold-text { display: inline-block; color: var(--fold-text-color, currentColor); font-size: var(--fold-text-font-size, inherit); font-weight: var(--fold-text-font-weight, inherit); line-height: 0.95; letter-spacing: -0.04em; white-space: pre-wrap; user-select: text; } .fold-text-sr-only { position: absolute; user-select: none; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .fold-text-visual { display: inline; } .fold-text-word { display: inline-block; white-space: nowrap; } .fold-text-segment { display: inline-block; perspective: var(--fold-perspective, 700px); vertical-align: baseline; } .fold-text-segment[data-fold-split='line'] { display: block; } .fold-text-piece { --fold-shade: linear-gradient( 180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(255, 255, 255, 0.26) 100% ); position: relative; display: inline-block; backface-visibility: hidden; transform-origin: 50% 0%; } .fold-text-piece[data-fold-hinge='bottom'] { --fold-shade: linear-gradient(0deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(255, 255, 255, 0.26) 100%); transform-origin: 50% 100%; } .fold-text-piece[data-fold-hinge='left'] { --fold-shade: linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(255, 255, 255, 0.26) 100%); transform-origin: 0% 50%; } .fold-text-piece[data-fold-hinge='right'] { --fold-shade: linear-gradient( 270deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(255, 255, 255, 0.26) 100% ); transform-origin: 100% 50%; } .fold-text-piece[data-fold-style='blinds'] { perspective: var(--fold-perspective, 700px); } .fold-text-slat { position: relative; display: inline-block; backface-visibility: hidden; } .fold-text-slat[data-fold-slat='b'] { position: absolute; inset: 0; visibility: hidden; } .fold-text-piece::after, .fold-text-slat::after { content: attr(data-fold-text); position: absolute; inset: 0; pointer-events: none; color: transparent; -webkit-text-fill-color: transparent; background-image: var(--fold-shade); -webkit-background-clip: text; background-clip: text; opacity: var(--fold-crease, 0); } @media (prefers-reduced-motion: reduce) { .fold-text-piece, .fold-text-slat { transform: none !important; } .fold-text-piece::after, .fold-text-slat::after { opacity: 0 !important; } } 53:T2dc7,'use client'; import { useEffect, useLayoutEffect, useMemo, useRef } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import './FoldText.css'; gsap.registerPlugin(ScrollTrigger); const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect; const HINGES = { top: { origin: '50% 0%', axis: 'rotateX', sign: -1 }, bottom: { origin: '50% 100%', axis: 'rotateX', sign: 1 }, left: { origin: '0% 50%', axis: 'rotateY', sign: 1 }, right: { origin: '100% 50%', axis: 'rotateY', sign: -1 } }; const SLATS = { 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 = ['paper', 'blinds', 'flip']; const SLAT_DELAY = 0.24; const clamp = (value, min, max) => 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 = {} }) => { const rootRef = useRef(null); const safeHinge = HINGES[hinge] ? hinge : 'top'; const hingeConfig = HINGES[safeHinge]; const safeStyle = 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 renderPiece = (content, key, isLine = false) => ( {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) => { 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('.fold-text-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 = { each: reduceMotion ? Math.min(safeStagger, 0.02) : safeStagger, from: staggerFrom }; const pieces = elements.map(element => { const parts = safeStyle === 'blinds' ? Array.from(element.children) : [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, tilt) => 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 = null; let scrollTrigger = null; const play = loop => { 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 = null; let centers = null; let measured = null; let relaxing = false; const measure = box => { centers = pieces.map(piece => { const rect = piece.element.parentElement.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, deltaTime) => { 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 || 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) { 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 => { 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 = { '--fold-text-font-size': typeof fontSize === 'number' ? `${fontSize}px` : fontSize, '--fold-text-font-weight': fontWeight, '--fold-text-color': color, '--fold-perspective': `${Math.max(120, perspective)}px`, ...style }; 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.css","content":"$52","type":"registry:file","target":"@components/FoldText.css"},{"path":"FoldText.jsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]