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:T21e2,"use client"; import { useEffect, useState, useCallback } from "react"; import { motion, AnimatePresence, Transition } from "motion/react"; import { cn } from "@/lib/utils"; interface TypewriterLoopProps { LeadText?: string; morphingText?: string[]; className?: string; interval?: number; transition?: Transition; LeadTextClassName?: string; morphingTextClassName?: string; backgroundClassName?: string; cursorClassName?: string; staticColor?: "violet" | "blue" | "emerald" | "amber" | "rose" | "fuchsia"; darkGradientBackgroundLock?: boolean; // New prop } const TypewriterLoop = ({ LeadText = "Design", morphingText = ["Limitless", "Timeless", "Flawless"], className, interval = 4000, transition = { duration: 0.8, ease: "easeInOut" }, LeadTextClassName, morphingTextClassName, backgroundClassName, cursorClassName, staticColor, darkGradientBackgroundLock = false, // New prop with default false }: TypewriterLoopProps) => { const [index, setIndex] = useState(0); const [colorIndex, setColorIndex] = useState(0); const [nextIndex, setNextIndex] = useState(1); const gradientColors = [ "from-violet-400 to-violet-800 dark:from-violet-400 dark:to-violet-600", "from-blue-400 to-blue-800 dark:from-blue-400 dark:to-blue-600", "from-emerald-400 to-emerald-800 dark:from-emerald-400 dark:to-emerald-600", "from-amber-400 to-amber-800 dark:from-amber-400 dark:to-amber-600", "from-rose-400 to-rose-800 dark:from-rose-400 dark:to-rose-600", "from-fuchsia-400 to-fuchsia-800 dark:from-fuchsia-400 dark:to-fuchsia-600", ]; const backgroundColors = [ "from-transparent via-purple-200/30 to-purple-200 dark:from-transparent dark:via-violet-950/30 dark:to-violet-950/60", "from-transparent via-blue-200/30 to-blue-200 dark:from-transparent dark:via-blue-950/30 dark:to-blue-950/60", "from-transparent via-emerald-200/30 to-emerald-200 dark:from-transparent dark:via-emerald-950/30 dark:to-emerald-950/60", "from-transparent via-amber-200/30 to-amber-200 dark:from-transparent dark:via-amber-950/30 dark:to-amber-950/60", "from-transparent via-rose-200/30 to-rose-200 dark:from-transparent dark:via-rose-950/30 dark:to-rose-950/60", "from-transparent via-fuchsia-200/30 to-fuchsia-200 dark:from-transparent dark:via-fuchsia-950/30 dark:to-fuchsia-950/60", ]; // Dark-only background colors (no light mode variants) const darkOnlyBackgroundColors = [ "from-transparent via-violet-950/30 to-violet-950/60", "from-transparent via-blue-950/30 to-blue-950/60", "from-transparent via-emerald-950/30 to-emerald-950/60", "from-transparent via-amber-950/30 to-amber-950/60", "from-transparent via-rose-950/30 to-rose-950/60", "from-transparent via-fuchsia-950/30 to-fuchsia-950/60", ]; const cursorColors = [ "bg-violet-500", "bg-blue-500", "bg-emerald-500", "bg-amber-500", "bg-rose-500", "bg-fuchsia-500", ]; // Color mapping for static colors const staticGradientMap = { violet: "from-violet-400 to-violet-800 dark:from-violet-400 dark:to-violet-600", blue: "from-blue-400 to-blue-800 dark:from-blue-400 dark:to-blue-600", emerald: "from-emerald-400 to-emerald-800 dark:from-emerald-400 dark:to-emerald-600", amber: "from-amber-400 to-amber-800 dark:from-amber-400 dark:to-amber-600", rose: "from-rose-400 to-rose-800 dark:from-rose-400 dark:to-rose-600", fuchsia: "from-fuchsia-400 to-fuchsia-800 dark:from-fuchsia-400 dark:to-fuchsia-600", }; const staticBackgroundMap = { violet: "from-transparent via-purple-200/30 to-purple-200 dark:from-transparent dark:via-violet-950/30 dark:to-violet-950/60", blue: "from-transparent via-blue-200/30 to-blue-200 dark:from-transparent dark:via-blue-950/30 dark:to-blue-950/60", emerald: "from-transparent via-emerald-200/30 to-emerald-200 dark:from-transparent dark:via-emerald-950/30 dark:to-emerald-950/60", amber: "from-transparent via-amber-200/30 to-amber-200 dark:from-transparent dark:via-amber-950/30 dark:to-amber-950/60", rose: "from-transparent via-rose-200/30 to-rose-200 dark:from-transparent dark:via-rose-950/30 dark:to-rose-950/60", fuchsia: "from-transparent via-fuchsia-200/30 to-fuchsia-200 dark:from-transparent dark:via-fuchsia-950/30 dark:to-fuchsia-950/60", }; // Dark-only static background map const staticDarkOnlyBackgroundMap = { violet: "from-transparent via-violet-950/30 to-violet-950/60", blue: "from-transparent via-blue-950/30 to-blue-950/60", emerald: "from-transparent via-emerald-950/30 to-emerald-950/60", amber: "from-transparent via-amber-950/30 to-amber-950/60", rose: "from-transparent via-rose-950/30 to-rose-950/60", fuchsia: "from-transparent via-fuchsia-950/30 to-fuchsia-950/60", }; const staticCursorMap = { violet: "bg-violet-500", blue: "bg-blue-500", emerald: "bg-emerald-500", amber: "bg-amber-500", rose: "bg-rose-500", fuchsia: "bg-fuchsia-500", }; // Determine which gradient to use const getGradientColor = () => { if (staticColor) { return staticGradientMap[staticColor]; } return gradientColors[colorIndex]; }; const getBackgroundColor = () => { // If dark lock is enabled, use dark-only backgrounds if (darkGradientBackgroundLock) { if (staticColor) { return staticDarkOnlyBackgroundMap[staticColor]; } return darkOnlyBackgroundColors[colorIndex]; } // Otherwise use normal backgrounds with both light and dark variants if (staticColor) { return staticBackgroundMap[staticColor]; } return backgroundColors[colorIndex]; }; const getCursorColor = () => { if (staticColor) { return staticCursorMap[staticColor]; } return cursorColors[colorIndex]; }; // Pre-calculate next index useEffect(() => { setNextIndex((index + 1) % morphingText.length); }, [index, morphingText.length]); useEffect(() => { const timer = setInterval(() => { setIndex((prev) => (prev + 1) % morphingText.length); }, interval); return () => clearInterval(timer); }, [morphingText.length, interval]); const handleExitComplete = useCallback(() => { // Only cycle colors if staticColor is not provided if (!staticColor) { setColorIndex((prev) => (prev + 1) % gradientColors.length); } }, [gradientColors.length, staticColor]); return (

{LeadText}

{/* Background gradient box */}

{morphingText[index]} {/* Cursor Line */}

); }; export default TypewriterLoop; 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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@satoriui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"packages/typewriter-loop/typewriter-loop.tsx","content":"$52","type":"registry:component","target":"components/satori-ui/typewriter-loop.tsx"}],"className":"h-[70svh] min-h-80"}]]}]