Installation

pnpm dlx shadcn-svelte@latest add https://spelte.dev/r/signature.json

Place the LastoriaBoldRegular.otf font file inside your static directory (SvelteKit's public directory).

Usage

<script>
  import Signature from '$registry/spelte/signature.svelte';
</script>
 
<div class="flex items-center justify-center">
  <Signature class="dark:invert-100" text="Spelte Studio" fontSize={16} color="#1D1D1F" />
</div>

Examples

Color

<script>
  import Signature from '$registry/spelte/signature.svelte';
</script>
 
<div class="rounded-2xl p-6">
  <Signature text="Tomm." fontSize={16} color="#0156FE" />
</div>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | text | string | "Signature" | Text to convert into a handwriting path | | color | string | "#000" | Stroke and fill color | | fontSize | number | 14 | Font size for glyph conversion | | duration | number | 1.5 | Animation duration per character (seconds) | | delay | number | 0 | Delay before first character animates (seconds) | | inViewProp | boolean | false | Trigger only when in viewport | | once | boolean | true | Only animate once | | class | string | — | Additional CSS classes |