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:T1e5e,"use client"; import { useEffect, useRef } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // A preloader. The letters rise one by one out of a mask, a gradient wipes up through each of them, // they leave through the top, and then the whole panel lifts off the page. It uses the font of the // page it sits in, so there is no font to install. export type TextLoaderProps = { /** The word the loader spells out. One letter is one animated piece. */ text?: string; /** Colours of the gradient that fills the letters (45 degrees, one gradient per letter). Two or more. */ gradientColors?: string[]; /** Colour of the panel. */ backgroundColor?: string; /** Colour of the letters before the gradient fills them. Leave it out and it follows the panel: a light tint on a dark panel, a dark tint on a light one. */ ghostColor?: string; /** How long each step takes, in seconds. Any you leave out keep their default. */ duration?: { /** Letters rising into view. */ slideUp?: number; /** The gradient filling the letters. */ reveal?: number; /** Letters leaving through the top. */ slideDown?: number; }; /** The pauses in between, in seconds. Any you leave out keep their default. */ delays?: { /** Gap between one letter and the next. */ stagger?: number; /** Pause between the letters landing and the gradient starting. */ betweenAnimations?: number; /** Pause between the gradient finishing and the letters leaving. */ beforeSlideDown?: number; }; /** Cover the whole window (position: fixed) instead of filling the box it sits in. */ fullscreen?: boolean; /** Change this number to play the loader again. */ replayKey?: number; /** Called once the panel has left the screen. A new function on every render is fine. */ onComplete?: () => void; /** Extra classes for the panel. */ className?: string; }; // Module constants, so the defaults are the same object on every render const DEFAULT_COLORS = ["#ff0000", "#ff3333", "#ff6600", "#cc0000"]; const DEFAULT_DURATION = { slideUp: 0.6, reveal: 0.8, slideDown: 0.6 }; const DEFAULT_DELAYS = { stagger: 0.05, betweenAnimations: 0.3, beforeSlideDown: 0.5 }; // Like { ...defaults, ...given }, except a value that is undefined falls back to its default function withDefaults>(defaults: T, given: Partial = {}): T { const merged = { ...defaults }; for (const key of Object.keys(defaults) as (keyof T)[]) { const value = given[key]; if (value !== undefined) merged[key] = value; } return merged; } // Picks the ghost letters from the panel colour, so a light panel never hides them. // Only #rgb and #rrggbb are read; any other colour format falls back to the light tint. function ghostFor(background: string): string { const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(background.trim())?.[1]; if (!hex) return "rgba(255, 255, 255, 0.2)"; const full = hex.length === 3 ? Array.from(hex, (c) => c + c).join("") : hex; const channel = (i: number) => parseInt(full.slice(i, i + 2), 16); const [r, g, b] = [channel(0), channel(2), channel(4)]; const light = (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6; return light ? "rgba(0, 0, 0, 0.14)" : "rgba(255, 255, 255, 0.2)"; } export function TextLoader({ text = "DIMAAC", gradientColors = DEFAULT_COLORS, backgroundColor = "#17171a", ghostColor, duration, delays, fullscreen = false, replayKey = 0, onComplete, className = "", }: TextLoaderProps) { const panelRef = useRef(null); // A partly filled object still works: whatever is missing comes from the defaults const { slideUp, reveal, slideDown } = withDefaults(DEFAULT_DURATION, duration); const { stagger, betweenAnimations, beforeSlideDown } = withDefaults(DEFAULT_DELAYS, delays); // The newest onComplete lives in a ref. The animation reads it when it ends, so a parent that // re-renders (and passes a new function) never restarts the loader. const onCompleteRef = useRef(onComplete); useEffect(() => { onCompleteRef.current = onComplete; }); const letters = Array.from(text); const gradient = `linear-gradient(45deg, ${(gradientColors.length > 1 ? gradientColors : DEFAULT_COLORS).join(", ")})`; useGSAP( () => { const panel = panelRef.current; if (!panel) return; const glyphs = gsap.utils.toArray("[data-glyph]", panel); const fills = gsap.utils.toArray("[data-fill]", panel); const finish = () => { // Off screen already, but also out of reach of the keyboard and screen readers gsap.set(panel, { visibility: "hidden" }); onCompleteRef.current?.(); }; const mm = gsap.matchMedia(); mm.add("(prefers-reduced-motion: no-preference)", () => { gsap.set(panel, { y: 0, yPercent: 0, visibility: "visible" }); gsap.set(glyphs, { y: 0, yPercent: 110 }); gsap.set(fills, { clipPath: "inset(100% 0% 0% 0%)" }); const tl = gsap.timeline({ onComplete: finish }); tl.to(glyphs, { yPercent: 0, duration: slideUp, stagger, ease: "power2.out" }) .to(fills, { clipPath: "inset(0% 0% 0% 0%)", duration: reveal, delay: betweenAnimations, ease: "power1.inOut" }) .to(glyphs, { yPercent: -110, duration: slideDown, stagger, delay: beforeSlideDown, ease: "power2.in" }) .to(panel, { yPercent: -100, duration: 0.8, delay: 0.3, ease: "power2.inOut" }, "-=0.2"); }); // Reduced motion: nothing moves. The word shows filled for a moment, then the panel fades away. mm.add("(prefers-reduced-motion: reduce)", () => { gsap.set(panel, { y: 0, yPercent: 0, visibility: "visible", opacity: 1 }); gsap.set(glyphs, { y: 0, yPercent: 0 }); gsap.set(fills, { clipPath: "inset(0% 0% 0% 0%)" }); gsap.to(panel, { opacity: 0, duration: 0.4, delay: 0.9, ease: "none", onComplete: finish }); }); return () => mm.revert(); }, // Only the numbers and the text restart it. Colours are plain styles, so they change live. { scope: panelRef, dependencies: [text, slideUp, reveal, slideDown, stagger, betweenAnimations, beforeSlideDown, replayKey], revertOnUpdate: true }, ); // One size rule: it grows with the panel's width, and shrinks for long words so they always fit const fontSize = `clamp(2rem, min(20cqi, ${(88 / (Math.max(letters.length, 3) * 0.66)).toFixed(2)}cqi), 8rem)`; return (

{text}

); } 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/text-loader/text-loader.tsx","content":"$50","type":"registry:component","target":"components/dimaac/text-loader.tsx"}],"className":"h-[70svh] min-h-80"}]]}]