Overview
Components
Text Animations
Signature
Animated signature component with handwriting effect using custom fonts.
opentype.js
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/signature.json
Install dependencies
Install the required packages for this component:
pnpm add opentype.js
Copy the Source Code
Copy and paste the following code into your project:
signature.svelte
index.ts
Folder Structure
Folder Structure
Examples
Color
Props
| Name | Type | Default | Description |
|---|---|---|---|
text | string | '' | The text converted into animated SVG paths using the downloaded font file. |
color | string | "#000" | Sets both the stroke and fill color used for the drawn signature paths. |
fontSize | number | 14 | Controls the font size passed into the font parser when generating glyph paths. |
duration | number | 1.5 | Sets the draw animation duration in seconds for each path segment. |
delay | number | 0 | Adds a base delay in seconds before path drawing begins. |
inView | boolean | false | Waits to animate until the component enters the viewport. |
once | boolean | true | When using inView, controls whether the signature draws only on first entry. |
class | string | | Custom classes applied to the root SVG element. |