Signature

1"use client";
2 
3import { useEffect, useId, useState } from "react";
4import { motion } from "framer-motion";
5import opentype from "opentype.js";
6import { cn } from "@/lib/utils";
7 
8interface SignatureProps {
9  /** Text to generate signature for */
10  text?: string;
11  /** Color of the signature path */
12  color?: string;
13  /** Font size of the signature */
14  fontSize?: number;
15  /** Animation duration in seconds */
16  duration?: number;
17  /** Delay before animation starts in seconds */
18  delay?: number;
19  /** Additional CSS classes */
20  className?: string;
21  /** Only animate when in view */
22  inView?: boolean;
23  /** Only animate once */
24  once?: boolean;
25  /** Custom font URL to load */
26  fontUrl?: string;
27}
28 
29export function Signature({
30  text = "Signature",
31  color = "currentColor",
32  fontSize = 32,
33  duration = 1.5,
34  delay = 0,
35  className,
36  inView = false,
37  once = true,
38  fontUrl,
39}: SignatureProps) {
40  const [paths, setPaths] = useState<string[]>([]);
41  const [width, setWidth] = useState<number>(300);
42  const height = fontSize * 3; // Give plenty of vertical space
43  const horizontalPadding = fontSize * 0.1;
44  const topMargin = fontSize * 1.5; // Shift down
45  const baseline = topMargin;
46  const maskId = `signature-reveal-${useId().replace(/:/g, "")}`;
47 
48  useEffect(() => {
49    async function load() {
50      try {
51        let font;
52        const fontPaths = fontUrl 
53          ? [fontUrl] 
54          : [
55              "/LastoriaBoldRegular.otf",
56              "./LastoriaBoldRegular.otf",
57              "https://www.componentry.fun/LastoriaBoldRegular.otf",
58            ];
59 
60        for (const path of fontPaths) {
61          try {
62            font = await opentype.load(path as string);
63            break;
64          } catch {
65            // Try next path
66          }
67        }
68 
69        if (!font) {
70          throw new Error("Font could not be loaded from any path");
71        }
72 
73        let x = horizontalPadding;
74        const newPaths: string[] = [];
75 
76        for (const char of text) {
77          const glyph = font.charToGlyph(char);
78          const path = glyph.getPath(x, baseline, fontSize);
79          newPaths.push(path.toPathData(3));
80 
81          const advanceWidth = glyph.advanceWidth ?? font.unitsPerEm;
82          x += advanceWidth * (fontSize / font.unitsPerEm);
83        }
84 
85        setPaths(newPaths);
86        setWidth(x + horizontalPadding);
87      } catch (error) {
88        console.error("Signature component font load error:", error);
89        setPaths([]);
90// … truncated