51: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"] 52: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"] 53:T1a02,//biome-ignore-all lint/suspicious/noArrayIndexKey: index is stable for letter positions "use client"; import { type AnimationOptions, useAnimate, type ValueAnimationTransition, } from "motion/react"; import type React from "react"; import { type ElementType, useCallback, useMemo, useState } from "react"; import { cn } from "@/lib/utils"; function splitIntoChars(text: string): string[] { if (typeof Intl !== "undefined" && "Segmenter" in Intl) { const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" }); return Array.from(segmenter.segment(text), ({ segment }) => segment); } return Array.from(text); } interface WordObject { characters: string[]; needsSpace: boolean; } export type Letter3DSwapProps = { children: React.ReactNode; as?: ElementType; mainClassName?: string; frontFaceClassName?: string; secondFaceClassName?: string; staggerDuration?: number; staggerFrom?: "first" | "last" | "center" | number | "random"; transition?: ValueAnimationTransition | AnimationOptions; rotateDirection?: "top" | "right" | "bottom" | "left"; }; interface CharBoxProps { char: string; frontFaceClassName?: string; secondFaceClassName?: string; rotateDirection: "top" | "right" | "bottom" | "left"; } function CharBox({ char, frontFaceClassName, secondFaceClassName, rotateDirection, }: CharBoxProps) { const getSecondFaceTransform = () => { switch (rotateDirection) { case "top": return "rotateX(-90deg) translateZ(0.5lh)"; case "bottom": return "rotateX(90deg) translateZ(0.5lh)"; case "right": return "rotateY(90deg) translateX(50%) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%)"; case "left": return "rotateY(90deg) translateX(50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) translateX(50%)"; } }; const isVertical = rotateDirection === "top" || rotateDirection === "bottom"; return ( {char} {char} ); } export function Letter3DSwap({ children, as = "p", mainClassName, frontFaceClassName, secondFaceClassName, staggerDuration = 0.05, staggerFrom = "first", transition = { damping: 30, stiffness: 300, type: "spring" }, rotateDirection = "right", ...props }: Letter3DSwapProps) { const [isAnimating, setIsAnimating] = useState(false); const [isHovering, setIsHovering] = useState(false); const [scope, animate] = useAnimate(); const rotationTransform = (() => { switch (rotateDirection) { case "top": return "rotateX(90deg)"; case "right": return "rotateY(90deg)"; case "bottom": return "rotateX(-90deg)"; case "left": return "rotateY(90deg)"; } })(); const text = useMemo(() => { if (typeof children === "string") return children; if (typeof children === "number") return String(children); return ""; }, [children]); const characters = useMemo((): WordObject[] => { return text.split(" ").map((word, i, arr) => ({ characters: splitIntoChars(word), needsSpace: i !== arr.length - 1, })); }, [text]); const getStaggerDelay = useCallback( (index: number, total: number) => { if (staggerFrom === "first") return index * staggerDuration; if (staggerFrom === "last") return (total - 1 - index) * staggerDuration; if (staggerFrom === "center") return Math.abs(Math.floor(total / 2) - index) * staggerDuration; if (staggerFrom === "random") return ( Math.abs(Math.floor(Math.random() * total) - index) * staggerDuration ); return Math.abs(staggerFrom - index) * staggerDuration; }, [staggerFrom, staggerDuration], ); const handleHoverStart = useCallback(async () => { if (isAnimating || isHovering) return; setIsHovering(true); setIsAnimating(true); const totalChars = characters.reduce( (sum, w) => sum + w.characters.length, 0, ); const delays = Array.from({ length: totalChars }, (_, i) => getStaggerDelay(i, totalChars), ); await animate( ".letter-3d-swap-char-box-item" as string, { transform: rotationTransform } as Record, { ...transition, delay: (i: number) => delays[i] ?? 0 } as Record< string, unknown >, ); await animate( ".letter-3d-swap-char-box-item" as string, { transform: "rotateX(0deg) rotateY(0deg)" } as Record, { duration: 0 } as Record, ); setIsAnimating(false); }, [ isAnimating, isHovering, characters, transition, getStaggerDelay, rotationTransform, animate, ]); const handleHoverEnd = useCallback(() => setIsHovering(false), []); const ElementTag = (as ?? "p") as ElementType; return ( {text} {characters.map((wordObj, wordIndex, array) => { const prevCount = array .slice(0, wordIndex) .reduce((sum, w) => sum + w.characters.length, 0); return ( {wordObj.characters.map((char, charIndex) => ( ))} {wordObj.needsSpace && } ); })} ); } 50:["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@cnippet","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/motion/letter-3d-swap.tsx","content":"$53","type":"registry:ui","target":"components/motion/letter-3d-swap.tsx"}],"className":"h-[70svh] min-h-80"}]]}]