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:T168b,"use client"; import { useEffect, useId, useState } from "react"; import { motion } from "motion/react"; import { parse as parseFont } from "opentype.js"; type SignatureGlyph = { advanceWidth?: number; getPath: ( x: number, y: number, fontSize: number, ) => { toPathData: (decimalPlaces?: number) => string; }; }; type SignatureFont = { unitsPerEm: number; charToGlyph: (char: string) => SignatureGlyph; }; const SVG_HEIGHT = 100; const PATH_DELAY_STEP = 0.2; const OPACITY_DELAY_OFFSET = 0.01; const fontCache = new Map(); function getFontCacheKey(path: string): string { try { return new URL(path, window.location.origin).href; } catch { return path; } } function getPathTransition(index: number, duration: number, delay: number) { const pathDelay = delay + index * PATH_DELAY_STEP; return { pathLength: { delay: pathDelay, duration, ease: "easeInOut" as const, }, opacity: { delay: pathDelay + OPACITY_DELAY_OFFSET, duration: 0.01, }, }; } async function loadFontFromPaths(fontPaths: string[]): Promise { for (const path of fontPaths) { try { const cacheKey = getFontCacheKey(path); const cachedFont = fontCache.get(cacheKey); if (cachedFont) { return cachedFont; } const response = await fetch(path); if (!response.ok) { continue; } const fontBuffer = await response.arrayBuffer(); const font = parseFont(fontBuffer) as SignatureFont; fontCache.set(cacheKey, font); return font; } catch { // Try next path } } throw new Error( `Font could not be loaded from the provided path${fontPaths.length === 1 ? "" : "s"}: ${fontPaths.join(", ")}`, ); } async function buildSignaturePaths({ text, fontSize, baseline, horizontalPadding, }: { text: string; fontSize: number; baseline: number; horizontalPadding: number; }): Promise<{ paths: string[]; width: number }> { const font = await loadFontFromPaths(["/LastoriaBoldRegular.otf"]); let x = horizontalPadding; const nextPaths: string[] = []; for (const char of text) { const glyph = font.charToGlyph(char); const path = glyph.getPath(x, baseline, fontSize); nextPaths.push(path.toPathData(3)); const advanceWidth = glyph.advanceWidth ?? font.unitsPerEm; x += advanceWidth * (fontSize / font.unitsPerEm); } return { paths: nextPaths, width: x + horizontalPadding, }; } function renderMotionPaths({ paths, stroke, strokeWidth, strokeLinecap, strokeLinejoin, duration, delay, }: { paths: string[]; stroke: string; strokeWidth: number; strokeLinecap: "round" | "butt"; strokeLinejoin: "round"; duration: number; delay: number; }) { return paths.map((d, index) => ( )); } const PATH_VARIANTS = { hidden: { pathLength: 0, opacity: 0 }, visible: { pathLength: 1, opacity: 1 }, }; interface SignatureProps { text?: string; color?: string; fontSize?: number; duration?: number; delay?: number; className?: string; inView?: boolean; once?: boolean; } export function Signature({ text = "Signature", color = "#000", fontSize = 14, duration = 1.5, delay = 0, className, inView = false, once = true, }: SignatureProps) { const [paths, setPaths] = useState([]); const [width, setWidth] = useState(300); const horizontalPadding = fontSize * 0.1; const topMargin = Math.max(5, (SVG_HEIGHT - fontSize) / 2); const baseline = Math.min(SVG_HEIGHT - 5, topMargin + fontSize); const maskId = `signature-reveal-${useId().replace(/:/g, "")}`; useEffect(() => { let isCancelled = false; async function loadSignaturePaths() { try { const { paths: nextPaths, width: nextWidth } = await buildSignaturePaths({ text, fontSize, baseline, horizontalPadding, }); if (isCancelled) { return; } setPaths(nextPaths); setWidth(nextWidth); } catch { if (isCancelled) { return; } setPaths([]); setWidth(text.length * fontSize * 0.6); } } void loadSignaturePaths(); return () => { isCancelled = true; }; }, [text, fontSize, baseline, horizontalPadding]); return ( {renderMotionPaths({ paths, stroke: "white", strokeWidth: fontSize * 0.22, strokeLinecap: "round", strokeLinejoin: "round", duration, delay, })} {renderMotionPaths({ paths, stroke: color, strokeWidth: 2, strokeLinecap: "butt", strokeLinejoin: "round", duration, delay, })} {paths.map((d, index) => ( ))} ); } 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","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"}]]}]}],["$","li","opentype.js",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/opentype.js","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":"opentype.js"}]]}]}],["$","li","@types/opentype.js",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40types%2Fopentype.js","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":"@types/opentype.js"}]]}]}]]}],["$","$L4e",null,{"namespace":"@spell","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/spell-ui/signature.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]