4e: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"] 4f: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"] 50:T155f,"use client"; import { useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { SplitText } from "gsap/SplitText"; import { useGSAP } from "@gsap/react"; // Big headline rows. As a row scrolls into view it slides in from the side while its letters // drop in from above and below (every other letter from the opposite side) and settle into the // word. The next row slides in from the other side, so the page zig-zags as you scroll. if (typeof window !== "undefined") gsap.registerPlugin(useGSAP, ScrollTrigger, SplitText); export type SettleTextProps = { /** The headlines, one per row. */ lines: string[]; /** Scroll smoothing in seconds: how long the text takes to catch up with the scrollbar. 0 follows it exactly. */ scrub?: number; /** How far a row slides in from the side, as a percent of its width. 0 means no slide. */ offset?: number; /** How much later each letter settles than the one before it, as a fraction of the row's scroll. */ letterStagger?: number; /** How far, in pixels, the letters start above or below their place. */ drop?: number; /** Slide every other row in from the opposite side, and settle its letters from the other end. */ alternate?: boolean; /** The element that scrolls (an element or a CSS selector). The default is the window. */ scroller?: HTMLElement | string | null; /** Extra classes for the outer box. */ className?: string; /** Extra classes for every row. Sets the row height (85svh by default) and can set a background. */ rowClassName?: string; /** Extra classes per row, repeating if there are more rows than entries. Handy for a background per row. */ rowClassNames?: string[]; /** Extra classes for the headline text, e.g. a font size or a font. */ headingClassName?: string; }; export function SettleText({ lines, scrub = 1, offset = 100, letterStagger = 0.04, drop = 150, alternate = true, scroller = null, className = "", rowClassName = "h-[85svh]", rowClassNames = [], headingClassName = "text-[clamp(2.5rem,13vw,9rem)]", }: SettleTextProps) { const boxRef = useRef(null); useGSAP( () => { const box = boxRef.current; if (!box) return; // Reduced motion: nothing is split or moved, the headlines just sit there, readable. const mm = gsap.matchMedia(); mm.add("(prefers-reduced-motion: no-preference)", () => { const splits: SplitText[] = []; gsap.utils.toArray("[data-settle-row]", box).forEach((row, rowIndex) => { const track = row.querySelector("[data-settle-track]"); const heading = row.querySelector("[data-settle-heading]"); if (!track || !heading) return; // Each letter becomes its own inline-block, so it can move on its own. // SplitText also keeps the whole word readable for screen readers. const split = SplitText.create(heading, { type: "chars", charsClass: "settle-char" }); splits.push(split); const letters = split.chars as HTMLElement[]; const count = letters.length; if (count === 0) return; // Odd rows go the other way: they slide in from the left and settle their last letter first. const flipped = alternate && rowIndex % 2 === 1; const side = flipped ? -1 : 1; // The row's scroll is one timeline of length 1. The letters start at 0.1 and all // finish by 1, so each letter's trip is whatever is left after the stagger. // The stagger is capped so every letter still has a short trip. const step = count > 1 ? Math.min(letterStagger, 0.7 / (count - 1)) : 0; const trip = 0.9 - step * (count - 1); const timeline = gsap.timeline({ defaults: { ease: "none" }, scrollTrigger: { trigger: row, ...(scroller ? { scroller } : {}), start: "top bottom", end: "top top", scrub: scrub > 0 ? scrub : true, }, }); timeline.fromTo(track, { xPercent: offset * side }, { xPercent: 0, duration: 1 }, 0); letters.forEach((letter, index) => { const order = flipped ? count - 1 - index : index; const from = index % 2 === 0 ? -drop : drop; timeline.fromTo(letter, { y: from }, { y: 0, duration: trip }, 0.1 + order * step); }); }); return () => splits.forEach((split) => split.revert()); }); return () => mm.revert(); }, { scope: boxRef, dependencies: [lines.join("\n"), scrub, offset, letterStagger, drop, alternate, scroller], revertOnUpdate: true }, ); return (

{lines.map((line, index) => (

{line}

))}

); } 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/dimaac/settle-text/settle-text.tsx","content":"$50","type":"registry:component","target":"components/dimaac/settle-text.tsx"}],"className":"h-[70svh] min-h-80"}]]}]