52: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"] 53: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"] 54:T30ab,"use client"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { SplitText } from "gsap/SplitText"; import { Children, cloneElement, createElement, isValidElement, type ReactElement, type ReactNode, type Ref, useRef, } from "react"; import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion"; import { observeWindowResize, waitForScrollerReady, } from "@/lib/scroll-trigger-utils"; gsap.registerPlugin(SplitText, ScrollTrigger); export type TextRevealBlockDirection = "down" | "left" | "right" | "up"; interface DirectionConfig { axis: "scaleX" | "scaleY"; enterOrigin: string; exitOrigin: string; } const DIRECTION_CONFIG = { down: { axis: "scaleY", enterOrigin: "bottom center", exitOrigin: "top center", }, left: { axis: "scaleX", enterOrigin: "left center", exitOrigin: "right center", }, right: { axis: "scaleX", enterOrigin: "right center", exitOrigin: "left center", }, up: { axis: "scaleY", enterOrigin: "top center", exitOrigin: "bottom center", }, } as const satisfies Record; export interface TextRevealBlockProps { /** When true, each line plays once when the block enters the viewport. */ animateOnScroll?: boolean; /** HTML tag when using the `text` prop. */ as?: keyof React.JSX.IntrinsicElements; /** Color of the wipe block. */ blockColor?: string; children?: ReactNode; /** Class name for the element created from `text` + `as`. */ className?: string; /** Delay before the first line starts, in seconds. */ delay?: number; /** Wipe travel direction for each line. */ direction?: TextRevealBlockDirection; /** Duration of each wipe phase, in seconds. */ duration?: number; /** Scroll container for `animateOnScroll` triggers. @default window */ scroller?: Element | Window; /** * Custom event dispatched when a Lenis/proxied scroller is ready. * Refreshes ScrollTrigger positions after the scroller mounts. */ scrollReadyEvent?: string; /** Delay between each line, in seconds. */ stagger?: number; /** Plain-text alternative to `children`. */ text?: string; } interface LineSetup { blocks: HTMLDivElement[]; lines: Element[]; splits: SplitText[]; } interface AnimationOptions { animateOnScroll: boolean; blockColor: string; container: HTMLElement; delay: number; direction: TextRevealBlockDirection; duration: number; prefersReducedMotion: boolean; scroller: Element | Window; stagger: number; } function assignRef(ref: Ref | undefined, value: T | null) { if (typeof ref === "function") { ref(value); return; } if (ref && typeof ref === "object") { (ref as { current: T | null }).current = value; } } function mergeRefs(...refs: Array | undefined>) { return (node: T | null) => { for (const ref of refs) { assignRef(ref, node); } }; } /** Single element suitable for cloneElement; skips whitespace text nodes. */ function getCloneableChild(node: ReactNode): ReactElement | null { if (isValidElement(node)) { return node; } let found: ReactElement | null = null; let count = 0; Children.forEach(node, (child) => { if (child == null || child === false) { return; } if (typeof child === "string" && child.trim() === "") { return; } if (isValidElement(child)) { count += 1; found = child; return; } count += 1; }); return count === 1 ? found : null; } function restoreWrappers(container: HTMLElement) { const wrappers = container.querySelectorAll(".text-reveal-block-line"); for (const wrapper of wrappers) { const firstChild = wrapper.firstChild; if (wrapper.parentNode && firstChild) { wrapper.parentNode.insertBefore(firstChild, wrapper); wrapper.remove(); } } } function createCleanup(container: HTMLElement, setup: LineSetup) { return () => { for (const split of setup.splits) { split.revert(); } restoreWrappers(container); }; } function setupLineReveal( container: HTMLElement, blockColor: string ): LineSetup { const splits: SplitText[] = []; const lines: Element[] = []; const blocks: HTMLDivElement[] = []; const elements = container.hasAttribute("data-text-reveal-block-wrapper") ? Array.from(container.children) : [container]; for (const element of elements) { const split = SplitText.create(element, { type: "lines", linesClass: "block-line++", lineThreshold: 0.1, }); splits.push(split); for (const line of split.lines) { const parent = line.parentNode; if (!parent) { continue; } const wrapper = document.createElement("div"); wrapper.className = "text-reveal-block-line"; wrapper.style.position = "relative"; wrapper.style.display = "block"; wrapper.style.width = "max-content"; wrapper.style.maxWidth = "100%"; wrapper.style.overflow = "hidden"; parent.insertBefore(wrapper, line); wrapper.appendChild(line); const lineElement = line as HTMLElement; lineElement.style.position = "relative"; lineElement.style.display = "block"; const block = document.createElement("div"); block.className = "text-reveal-block-wipe"; block.style.position = "absolute"; block.style.top = "0"; block.style.left = "0"; block.style.width = "101%"; block.style.height = "101%"; block.style.pointerEvents = "none"; block.style.willChange = "transform"; block.style.zIndex = "1"; block.style.backgroundColor = blockColor; wrapper.appendChild(block); lines.push(line); blocks.push(block); } } return { splits, lines, blocks }; } function createBlockRevealTimeline( block: HTMLDivElement, line: Element, index: number, delay: number, stagger: number, duration: number, direction: TextRevealBlockDirection ) { const { axis, exitOrigin } = DIRECTION_CONFIG[direction]; const tl = gsap.timeline({ delay: delay + index * stagger, }); tl.to(block, { [axis]: 1, duration, ease: "power4.inOut", }); tl.set(line, { opacity: 1 }); tl.set(block, { transformOrigin: exitOrigin, }); tl.to(block, { [axis]: 0, duration, ease: "power4.inOut", }); return tl; } function playTimelineIfInView( timeline: gsap.core.Timeline, scrollTrigger: ScrollTrigger ) { if (scrollTrigger.isActive && timeline.paused()) { timeline.play(); } } function refreshScrollRevealTriggers(scrollTriggers: ScrollTrigger[]) { ScrollTrigger.refresh(); for (const scrollTrigger of scrollTriggers) { const timeline = scrollTrigger.animation as gsap.core.Timeline | undefined; if (timeline) { playTimelineIfInView(timeline, scrollTrigger); } } } function runLineRevealAnimations( options: AnimationOptions, setup: LineSetup ): ScrollTrigger[] { const { animateOnScroll, container, delay, direction, duration, stagger } = options; const { axis, enterOrigin } = DIRECTION_CONFIG[direction]; const scrollTriggers: ScrollTrigger[] = []; gsap.set(setup.lines, { opacity: 0 }); gsap.set(setup.blocks, { [axis]: 0, transformOrigin: enterOrigin, }); for (const [index, block] of setup.blocks.entries()) { const line = setup.lines[index]; if (!line) { continue; } const timeline = createBlockRevealTimeline( block, line, index, delay, stagger, duration, direction ); if (animateOnScroll) { scrollTriggers.push( ScrollTrigger.create({ trigger: container, scroller: options.scroller, start: "top 90%", once: true, animation: timeline, invalidateOnRefresh: true, onRefresh(self) { const activeTimeline = self.animation as | gsap.core.Timeline | undefined; if (activeTimeline) { playTimelineIfInView(activeTimeline, self); } }, }) ); } } if (scrollTriggers.length > 0) { requestAnimationFrame(() => { refreshScrollRevealTriggers(scrollTriggers); }); } return scrollTriggers; } function initTextRevealBlock(options: AnimationOptions) { const setup = setupLineReveal(options.container, options.blockColor); if (options.prefersReducedMotion) { gsap.set(setup.lines, { opacity: 1 }); gsap.set(setup.blocks, { display: "none" }); return { cleanup: createCleanup(options.container, setup), scrollTriggers: [] as ScrollTrigger[], }; } const scrollTriggers = runLineRevealAnimations(options, setup); return { cleanup: createCleanup(options.container, setup), scrollTriggers, }; } export function TextRevealBlock({ children, text, as: Component = "p", className, animateOnScroll = true, delay = 0, blockColor = "var(--foreground)", direction = "left", stagger = 0.15, duration = 0.75, scroller: scrollerProp, scrollReadyEvent, }: TextRevealBlockProps) { const containerRef = useRef(null); const prefersReducedMotion = usePrefersReducedMotion(); const resolvedChild = children ?? (text ? createElement(Component, { className }, text) : null); useGSAP( () => { const container = containerRef.current; if (!container) { return; } let disposed = false; let teardown: (() => void) | undefined; let scrollTriggers: ScrollTrigger[] = []; let resizeObserver: ResizeObserver | undefined; let unbindWindowResize: (() => void) | undefined; const refreshTriggers = () => { if (scrollTriggers.length > 0) { refreshScrollRevealTriggers(scrollTriggers); } }; const onScrollReady = () => { refreshTriggers(); }; const mountAnimation = async () => { if (disposed || !containerRef.current) { return; } const scroller = scrollerProp ?? window; await waitForScrollerReady(scroller, scrollReadyEvent); if (disposed || !containerRef.current) { return; } const result = initTextRevealBlock({ animateOnScroll, blockColor, container: containerRef.current, delay, direction, duration, prefersReducedMotion, scroller, stagger, }); scrollTriggers = result.scrollTriggers; teardown = () => { for (const trigger of scrollTriggers) { trigger.kill(); } result.cleanup(); scrollTriggers = []; }; if (scrollTriggers.length > 0) { if (scroller instanceof HTMLElement) { resizeObserver = new ResizeObserver(() => { refreshTriggers(); }); resizeObserver.observe(scroller); } else { unbindWindowResize = observeWindowResize(refreshTriggers); } } }; if (scrollReadyEvent) { window.addEventListener(scrollReadyEvent, onScrollReady); } mountAnimation().catch(() => undefined); return () => { disposed = true; if (scrollReadyEvent) { window.removeEventListener(scrollReadyEvent, onScrollReady); } resizeObserver?.disconnect(); unbindWindowResize?.(); teardown?.(); }; }, { scope: containerRef, dependencies: [ animateOnScroll, delay, blockColor, direction, stagger, duration, prefersReducedMotion, scrollerProp, scrollReadyEvent, ], } ); if (!resolvedChild) { return null; } const child = getCloneableChild(resolvedChild); if (child) { return cloneElement(child as ReactElement<{ ref?: Ref }>, { ref: mergeRefs( containerRef, (child as ReactElement<{ ref?: Ref }>).props.ref ), }); } return (

} > {resolvedChild}

); } export default TextRevealBlock; 51:["$","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",{"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"}]]}]}],["$","li","@gsap/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40gsap%2Freact","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/react"}]]}]}]]}],["$","$L52",null,{"namespace":"@soralabs","registryDependencies":["@soralabs/hooks-use-prefers-reduced-motion","@soralabs/lib-scroll-trigger-utils"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/primitives/texts/text-reveal-block/index.tsx","content":"$54","type":"registry:ui","target":"components/sora-ui/texts/text-reveal-block.tsx"}],"className":"h-[70svh] min-h-80"}]]}]