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:T3309,'use client'; import { useId, useLayoutEffect, useMemo, useRef, useState } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; if (typeof window !== 'undefined') { gsap.registerPlugin(ScrollTrigger); } const DEFAULT_TEXT = 'Draw Attention'; const SHADOW_OPACITY = 0.5; const getWipeFrames = (box, wipeFrom) => { const end = { x: box.x, y: box.y, width: box.width, height: box.height }; if (wipeFrom === 'right') return { start: { ...end, x: box.x + box.width, width: 0 }, end }; if (wipeFrom === 'top') return { start: { ...end, height: 0 }, end }; if (wipeFrom === 'bottom') return { start: { ...end, y: box.y + box.height, height: 0 }, end }; return { start: { ...end, width: 0 }, end }; }; const getDashPattern = (strokeStyle, dashLength, strokeWidth) => { const width = Math.max(Number(strokeWidth) || 0, 0.1); const length = Math.max(Number(dashLength) || 0, 1); if (strokeStyle === 'dotted') { const gap = Math.max(length, width * 1.8); return { array: `0 ${gap}`, period: gap }; } if (strokeStyle === 'dashed') { const on = Math.max(length - width, 0.5); const off = length * 0.6 + width; return { array: `${on} ${off}`, period: on + off }; } return null; }; const StrokeText = ({ text = DEFAULT_TEXT, strokeColor = '#A78BFA', fillColor = 'currentColor', strokeWidth = 1.4, drawDuration = 1.6, fillDelay = 0.2, stagger = 0.05, ease = 'power2.out', trigger = 'mount', fillMode = 'wipe', wipeFrom = 'left', fontSize = 128, fontWeight = 800, fontFamily = 'inherit', letterSpacing = -4, reverse = false, strokeStyle = 'solid', dashLength = 10, marching = false, hoverRedraw = false, shadow = false, shadowColor, className = '', style = {} }) => { const rootRef = useRef(null); const strokeTextRef = useRef(null); const wipeRectRef = useRef(null); const shadowRef = useRef(null); const [box, setBox] = useState(null); const baseId = useId().replace(/[^a-zA-Z0-9_-]/g, ''); const wipeId = `stroke-text-wipe-${baseId}`; const revealId = `stroke-text-reveal-${baseId}`; const erodeId = `stroke-text-erode-${baseId}`; const shadowId = `stroke-text-shadow-${baseId}`; const characters = useMemo(() => Array.from(String(text ?? '')), [text]); const dash = Math.max(fontSize * 7, 200); const pattern = getDashPattern(strokeStyle, dashLength, strokeWidth); const dashArray = pattern ? pattern.array : null; const dashPeriod = pattern ? pattern.period : 0; const lift = fontSize * 0.06; const softness = fontSize * 0.016; const castShadow = shadow && fillMode !== 'none'; const fontStyle = useMemo( () => ({ fontFamily, fontSize: `${fontSize}px`, fontWeight, letterSpacing: `${letterSpacing}px` }), [fontFamily, fontSize, fontWeight, letterSpacing] ); useLayoutEffect(() => { const root = rootRef.current; if (!root || !strokeTextRef.current) return undefined; let cancelled = false; const measure = () => { if (cancelled || !strokeTextRef.current) return; let bbox; try { bbox = strokeTextRef.current.getBBox(); } catch { return; } if (!bbox || !bbox.width) return; const pad = Math.max(Number(strokeWidth) || 1, fontSize * 0.1); const next = { x: bbox.x - pad, y: bbox.y - pad, width: bbox.width + pad * 2, height: bbox.height + pad * 2 }; setBox(prev => prev && Math.abs(prev.x - next.x) < 0.5 && Math.abs(prev.width - next.width) < 0.5 && Math.abs(prev.y - next.y) < 0.5 && Math.abs(prev.height - next.height) < 0.5 ? prev : next ); }; measure(); document.fonts?.ready?.then(measure).catch(() => {}); const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure); observer?.observe(root); return () => { cancelled = true; observer?.disconnect(); }; }, [characters, fontFamily, fontSize, fontWeight, letterSpacing, strokeWidth]); useLayoutEffect(() => { const root = rootRef.current; if (typeof window === 'undefined' || !root || !box) return undefined; const strokes = gsap.utils.toArray(root.querySelectorAll('[data-stroke-char]')); const fills = gsap.utils.toArray(root.querySelectorAll('[data-fill-char]')); const wipe = wipeRectRef.current; const outline = strokeTextRef.current; const drop = shadowRef.current; if (!strokes.length) return undefined; const fillEnabled = fillMode !== 'none'; const useWipe = fillEnabled && fillMode === 'wipe'; const fillDuration = Math.max(0.4, drawDuration * 0.5); const staggerConfig = reverse ? { each: stagger, from: 'end' } : stagger; const frames = getWipeFrames(box, wipeFrom); const lifted = { dx: lift, dy: lift, 'flood-opacity': SHADOW_OPACITY }; const grounded = { dx: 0, dy: 0, 'flood-opacity': 0 }; const targets = [...strokes, ...fills, wipe, drop].filter(Boolean); const setStart = () => { gsap.killTweensOf(targets); gsap.set(strokes, { strokeDasharray: dash, strokeDashoffset: dash, strokeOpacity: 1 }); gsap.set(fills, { opacity: useWipe ? 1 : 0 }); if (wipe) gsap.set(wipe, { attr: frames.start }); if (drop) gsap.set(drop, { attr: grounded }); }; const setEnd = () => { gsap.killTweensOf(targets); gsap.set(strokes, { strokeDasharray: dash, strokeDashoffset: 0, strokeOpacity: 1 }); gsap.set(fills, { opacity: fillEnabled ? 1 : 0 }); if (wipe) gsap.set(wipe, { attr: fillEnabled ? frames.end : frames.start }); if (drop) gsap.set(drop, { attr: fillEnabled ? lifted : grounded }); }; const prefersReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; if (prefersReducedMotion) { setEnd(); return () => gsap.killTweensOf(targets); } const build = () => { setStart(); const looping = trigger === 'loop'; const tl = gsap.timeline({ paused: true, repeat: looping ? -1 : 0, repeatDelay: looping ? 0.9 : 0, yoyo: looping, defaults: { overwrite: 'auto' } }); tl.to(strokes, { strokeDashoffset: 0, duration: drawDuration, ease, stagger: staggerConfig }, 0); if (useWipe && wipe) { tl.to(wipe, { attr: frames.end, duration: fillDuration, ease: 'power2.inOut' }, drawDuration + fillDelay); } else if (fillEnabled) { tl.to( fills, { opacity: 1, duration: fillDuration, ease: 'power2.out', stagger: staggerConfig }, drawDuration + fillDelay ); } if (drop && fillEnabled) { tl.to( drop, { attr: lifted, duration: fillDuration * 1.4, ease: 'power3.out' }, drawDuration + fillDelay + fillDuration * 0.3 ); } return tl; }; let timeline = null; let scrollTrigger = null; let redraw = null; const listeners = []; const listen = handler => { root.addEventListener('pointerenter', handler); listeners.push(handler); }; if (trigger === 'hover') { setEnd(); listen(() => { timeline?.kill(); timeline = build(); timeline.play(0); }); } else { timeline = build(); if (trigger === 'scroll') { scrollTrigger = ScrollTrigger.create({ trigger: root, start: 'top 82%', once: true, onEnter: () => timeline?.play(0) }); } else { timeline.play(0); } if (hoverRedraw && trigger !== 'loop') { listen(() => { if (!timeline || timeline.progress() < 1 || redraw?.isActive()) return; redraw?.kill(); redraw = gsap .timeline() .to(strokes, { strokeOpacity: 0, duration: 0.2, ease: 'power1.out' }) .set(strokes, { strokeDashoffset: dash, strokeOpacity: 1 }) .to(strokes, { strokeDashoffset: 0, duration: drawDuration * 0.8, ease, stagger: staggerConfig }); }); } } const march = dashArray && marching && outline ? gsap.fromTo( outline, { strokeDashoffset: 0 }, { strokeDashoffset: -dashPeriod, duration: dashPeriod / (fontSize * 0.22), ease: 'none', repeat: -1 } ) : null; return () => { listeners.forEach(handler => root.removeEventListener('pointerenter', handler)); scrollTrigger?.kill(); timeline?.kill(); redraw?.kill(); march?.kill(); gsap.killTweensOf(targets); }; }, [ box, dash, drawDuration, fillDelay, stagger, ease, trigger, fillMode, wipeFrom, reverse, dashArray, dashPeriod, marching, hoverRedraw, castShadow, lift, fontSize ]); const viewBox = box ? `${box.x} ${box.y} ${box.width} ${box.height}` : `0 ${-fontSize} 600 ${fontSize * 1.3}`; const wipeStart = box ? getWipeFrames(box, wipeFrom).start : null; const region = box ? { x: box.x - fontSize, y: box.y - fontSize, width: box.width + fontSize * 2, height: box.height + fontSize * 2 } : {}; const outlineLayer = ( {characters.map((char, index) => ( {char} ))} ); return ( ); }; export default StrokeText; 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":"StrokeText/StrokeText.jsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]