The Signature component parses standard OpenType font files dynamically, generates SVG vector paths for input text, and progressively reveals them using stroke and fill mask animations. It is ideal for headers, landing page landing seals, certificates, or interactive landing designs.
Preview
Usage
Installation
$ pnpm dlx shadcn add https://klarden.vercel.app/r/signature.json
Basic Example
import { Signature } from "@/components/klarden-ui/signature";
export default function App() {
return (
<Signature
text="Antigravity"
color="#ffffff"
fontSize={60}
duration={2.0}
/>
);
}
Gradient and Glow Example
import { Signature } from "@/components/klarden-ui/signature";
export default function App() {
return (
<Signature
text="Nebula Design"
gradientColors={["#c084fc", "#e879f9", "#6366f1"]}
fontSize={70}
duration={2.2}
glow={true}
glowBlur={5}
/>
);
}
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "Signature" | The text to render and animate. |
color | string | "#ffffff" | The solid color for the signature outline and fills (ignored if gradientColors is set). |
gradientColors | string[] | undefined | An array of color strings (e.g. ['#c084fc', '#6366f1']) to render the signature with a linear gradient. |
fontSize | number | 60 | Font size of the rendered text in pixels. |
duration | number | 1.5 | Duration of the drawing animation in seconds. |
delay | number | 0 | Delay before starting the drawing animation in seconds. |
strokeWidth | number | 1.5 | Thickness of the outline stroke drawn progressively. |
maskStrokeWidth | number | fontSize * 0.25 | Thickness of the progressive path reveal mask. |
glow | boolean | false | Enables the neon glow drop-shadow filter effect. |
glowBlur | number | 4 | Standard deviation blur for the neon glow effect. |
glowColor | string | undefined | Custom color for the neon glow (defaults to main signature color/gradient). |
fontUrl | string | "/Tomatoes-O8L8.ttf" | URL of the OpenType (.otf/.ttf) cursive font file to parse. |
inView | boolean | false | If true, starts the animation only when the signature scrolls into view. |
once | boolean | true | If true, runs the draw animation only the first time it enters view. |
refreshKey | string | number | 0 | Changing this key forces the signature to remount and replay its stroke animation. |