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:T1b9f,"use client" import React, { memo, useCallback, useEffect, useMemo, useRef, type ElementType, } from "react" import { useAnimate, type AnimationOptions, type ValueAnimationTransition, } from "motion/react" import { cn } from "@/lib/utils" const HAS_SEGMENTER = typeof Intl !== "undefined" && "Segmenter" in Intl const splitIntoCharacters = (text: string): string[] => { if (HAS_SEGMENTER) { const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" }) return Array.from(segmenter.segment(text), ({ segment }) => segment) } return Array.from(text) } const extractTextFromChildren = (children: React.ReactNode): string => { if (children == null) return "" if (typeof children === "string") return children if (typeof children === "number") return String(children) if (Array.isArray(children)) { return children.map(extractTextFromChildren).join("") } if (React.isValidElement(children)) { const props = children.props as Record const childText = props.children as React.ReactNode if (childText != null) { return extractTextFromChildren(childText) } } return "" } const ROTATION_MAP = { top: "rotateX(90deg)", right: "rotateY(90deg)", bottom: "rotateX(-90deg)", left: "rotateY(-90deg)", } as const const DEFAULT_TRANSITION: ValueAnimationTransition = { type: "spring", damping: 30, stiffness: 300, } interface Text3DFlipProps { children: React.ReactNode as?: ElementType className?: string textClassName?: string flipTextClassName?: string staggerDuration?: number staggerFrom?: "first" | "last" | "center" | number | "random" transition?: ValueAnimationTransition | AnimationOptions rotateDirection?: "top" | "right" | "bottom" | "left" } const Text3DFlip = ({ children, as: ElementTag = "p", className, textClassName, flipTextClassName, staggerDuration = 0.05, staggerFrom = "first", transition = DEFAULT_TRANSITION, rotateDirection = "right", ...props }: Text3DFlipProps) => { const isAnimatingRef = useRef(false) const isMountedRef = useRef(false) const [scope, animate] = useAnimate() const rotationTransform = ROTATION_MAP[rotateDirection] useEffect(() => { isMountedRef.current = true return () => { isMountedRef.current = false isAnimatingRef.current = false } }, []) const text = useMemo(() => { try { return extractTextFromChildren(children) } catch { return "" } }, [children]) const characters = useMemo(() => { const words = text.split(" ") return words.map((word, i) => ({ characters: splitIntoCharacters(word), needsSpace: i !== words.length - 1, })) }, [text]) const charOffsets = useMemo(() => { const offsets = [0] for (const word of characters) { offsets.push(offsets.at(-1)! + word.characters.length) } return offsets }, [characters]) const getStaggerDelay = useCallback( (index: number, totalChars: number) => { if (staggerFrom === "first") return index * staggerDuration if (staggerFrom === "last") return (totalChars - 1 - index) * staggerDuration if (staggerFrom === "center") { const center = Math.floor(totalChars / 2) return Math.abs(center - index) * staggerDuration } if (staggerFrom === "random") { const randomIndex = Math.floor(Math.random() * totalChars) return Math.abs(randomIndex - index) * staggerDuration } return Math.abs(staggerFrom - index) * staggerDuration }, [staggerFrom, staggerDuration] ) const handleHoverStart = useCallback(async () => { if (isAnimatingRef.current) return isAnimatingRef.current = true try { const totalChars = characters.reduce( (sum, word) => sum + word.characters.length, 0 ) const delays = Array.from({ length: totalChars }, (_, i) => getStaggerDelay(i, totalChars) ) await animate( ".text-3d-flip-char", { transform: rotationTransform }, { ...transition, delay: (i: number) => delays[i], } ) if (!isMountedRef.current) return await animate( ".text-3d-flip-char", { transform: "rotateX(0deg) rotateY(0deg)" }, { duration: 0 } ) } finally { if (isMountedRef.current) { isAnimatingRef.current = false } } }, [characters, transition, getStaggerDelay, rotationTransform, animate]) return ( {text} {characters.map((wordObj, wordIndex) => ( {wordObj.characters.map((char, charIndex) => ( ))} {wordObj.needsSpace && } ))} ) } interface CharBoxProps { char: string textClassName?: string flipTextClassName?: string rotateDirection: "top" | "right" | "bottom" | "left" } const SECOND_FACE_TRANSFORMS = { top: "rotateX(-90deg) translateZ(0.5lh)", right: "rotateY(90deg) translateX(50%) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%)", bottom: "rotateX(90deg) translateZ(0.5lh)", left: "rotateY(90deg) translateX(50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) translateX(50%)", } as const const FRONT_FACE_TRANSFORMS = { top: "translateZ(0.5lh)", bottom: "translateZ(0.5lh)", left: "rotateY(90deg) translateX(50%) rotateY(-90deg)", right: "rotateY(-90deg) translateX(50%) rotateY(90deg)", } as const const CONTAINER_TRANSFORMS = { top: "translateZ(-0.5lh)", bottom: "translateZ(-0.5lh)", left: "rotateY(90deg) translateX(50%) rotateY(-90deg)", right: "rotateY(90deg) translateX(50%) rotateY(-90deg)", } as const const CharBox = memo( ({ char, textClassName, flipTextClassName, rotateDirection, }: CharBoxProps) => ( {char} {char} ) ) CharBox.displayName = "CharBox" Text3DFlip.displayName = "Text3DFlip" export default Text3DFlip 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":"@magicui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/magicui/text-3d-flip.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]