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:T1729,"use client"; import { useEffect, useId, useRef, useState, type CSSProperties } from "react"; const css = ` .decorated-text{position:relative;display:inline-block;padding:.12em .4em;--dt-e:cubic-bezier(.2,.8,.2,1)} .decorated-text .dt-box{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .decorated-text .dt-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dt-d) var(--dt-e)} .decorated-text[data-on] .dt-draw{stroke-dashoffset:0} .decorated-text .dt-tick{position:absolute;width:.32em;height:.32em;border:0 solid var(--dt-c);opacity:0;transform:translate(var(--dt-in-x),var(--dt-in-y));transition:opacity .3s ease calc(var(--dt-d)*.35),transform calc(var(--dt-d)*.8) var(--dt-e) calc(var(--dt-d)*.35)} .decorated-text[data-on] .dt-tick{opacity:1;transform:none} .decorated-text[data-on]:hover .dt-tick{transform:translate(calc(var(--dt-in-x)*-.6),calc(var(--dt-in-y)*-.6))} .decorated-text .dt-handle{position:absolute;width:7px;height:7px;margin:-3.5px;background:var(--background,#000);border:1.5px solid var(--dt-c);transform:scale(0);transition:transform .35s var(--dt-e) calc(var(--dt-d)*.85)} .decorated-text[data-on] .dt-handle{transform:scale(1)} .decorated-text .dt-spark{position:absolute;width:.42em;height:.42em;color:var(--dt-c);transform:scale(0) rotate(-90deg);transition:transform .6s var(--dt-e) calc(var(--dt-d) + var(--dt-sd,0ms))} .decorated-text[data-on] .dt-spark{transform:scale(1) rotate(0)} .decorated-text[data-on] .dt-spark svg{animation:dt-twinkle 2.4s ease-in-out calc(var(--dt-d) + var(--dt-sd,0ms) + .6s) infinite} @keyframes dt-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.55) rotate(45deg);opacity:.6}} @media (prefers-reduced-motion:reduce){.decorated-text *{transition:none!important;animation:none!important}} `; export interface DecoratedTextProps { text: string; /** Which decorations to draw. */ decoration?: "all" | "brackets" | "box" | "sparkles"; /** Draw in when scrolled into view, or only while hovered. */ trigger?: "view" | "hover"; /** Decoration color. */ color?: string; /** Draw-in duration, in ms. */ duration?: number; className?: string; } const Spark = () => ( ); const corners: (CSSProperties & { x: string; y: string })[] = [ { top: "-0.22em", left: "-0.22em", borderTopWidth: 2, borderLeftWidth: 2, x: "0.3em", y: "0.3em" }, { top: "-0.22em", right: "-0.22em", borderTopWidth: 2, borderRightWidth: 2, x: "-0.3em", y: "0.3em" }, { bottom: "-0.22em", left: "-0.22em", borderBottomWidth: 2, borderLeftWidth: 2, x: "0.3em", y: "-0.3em" }, { bottom: "-0.22em", right: "-0.22em", borderBottomWidth: 2, borderRightWidth: 2, x: "-0.3em", y: "-0.3em" }, ]; export function DecoratedText({ text, decoration = "all", trigger = "view", color = "#a3e635", duration = 900, className, }: DecoratedTextProps) { const ref = useRef(null); const [inView, setInView] = useState(false); const [hover, setHover] = useState(false); const mask = `dt${useId().replace(/[^a-zA-Z0-9]/g, "")}`; useEffect(() => { const el = ref.current; if (!el || trigger !== "view") return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } }, { threshold: 0.4 }); io.observe(el); return () => io.disconnect(); }, [trigger]); const on = trigger === "view" ? inView : hover; const show = (d: "brackets" | "box" | "sparkles") => decoration === d || decoration === "all"; return ( setHover(true)} onPointerLeave={() => setHover(false)} style={{ "--dt-c": color, "--dt-d": `${duration}ms` } as CSSProperties} > {text} {show("box") && ( )} {decoration === "box" && ["0% 0%", "100% 0%", "0% 100%", "100% 100%"].map((p) => { const [left, top] = p.split(" "); return ; })} {show("brackets") && corners.map(({ x, y, ...pos }, i) => ( ))} {show("sparkles") && ( <> )} ); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/ui/decorated-text.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]