Signature

# Brok UI: Signature (`signature`)

An inline SVG handwritten signature that draws itself on load with a self-drawing stroke animation, themed via semantic tokens. Falls back to a fully drawn signature under reduced motion.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add signature
```

## Usage

```blade
<x-ui.signature class="h-24 w-auto text-primary" />
```

## Props

- `color` (string, default `primary`) — Stroke colour token: primary, foreground, or accent.
- `strokeWidth` (int, default `2`) — SVG stroke width.
- `duration` (float, default `2.5`) — Total seconds for the full sequential draw across all strokes.
- `paths` (mixed|null, default `null`) — Array of custom SVG path d strings to draw instead of the built-in cursive signature.

## Use when

- Use only when visual expression supports storytelling, brand differentiation, or a clear showcase moment.
- Adding a decorative, self-drawing handwritten signature on load, for a testimonial, about page, or sign-off.
- Wanting a token-coloured SVG effect with a sequential multi-stroke draw animation and a reduced-motion fallback.

## Avoid when

- Do not place heavy effects in task-dense workflows where clarity, speed, and readability matter more.
- Needing an actual legal or captured signature; this component only renders a fixed decorative cursive path (or custom paths you supply), not a real signature capture.
- Needing arbitrary drawn text; use apple-hello-effect for a fixed word or a custom SVG for anything else.

## Anti-patterns

- Heavy effects in forms or task-dense workflows
- Motion that interferes with reading or focus

## Rules

- Use the `<brok:signature>` tag (or `<x-ui.signature>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/signature
- Registry JSON (files, props, contract): https://brokui.dev/r/open/signature.json

@props([
    'color' => 'primary',
    'strokeWidth' => 2,
    'duration' => 2.5,
    'paths' => null,
])

@php
    // Inline handwritten signature that "draws itself" on load. Each path is
    // normalised with pathLength="1" so every stroke shares the same dash unit
    // regardless of its real length; the ui-signature-draw keyframe then sweeps
    // stroke-dashoffset 1 -> 0 to reveal the ink. Animation is motion-safe only,
    // and the undrawn dash state lives inside the motion-safe media scope (see
    // ui.css), so reduced-motion users see the signature fully drawn (offset 0).
    $colorClass = match ($color) {
        'primary' => 'text-primary',
        'foreground' => 'text-foreground',
        'accent' => 'text-accent',
        default => 'text-primary',
    };

    $dur = is_numeric($duration) ? $duration.'s' : $duration;

    // Tasteful built-in cursive default on a 300x100 viewBox: a flowing first
    // stroke (cursive "name") plus a short underline flourish.
    $signaturePaths = $paths ?? [
        'M18 70 C30 30 42 30 46 52 C50 74 40 80 44 60 C50 32 64 28 70 50 C74 66 64 78 70 56 C78 30 96 26 102 50 C108 74 96 80 100 58 C108 26 132 22 140 48 C146 66 134 80 138 56 C146 28 168 30 174 54 C178 70 168 80 172 58 C180 30 206 28 214 52 C220 70 210 82 214 58 C222 30 250 30 262 46',
        'M40 84 C110 74 200 74 270 80',
    ];

    // Each stroke starts just as the previous one finishes (sequential draw).
    $count = max(count($signaturePaths), 1);
@endphp

<svg
    data-slot="signature"
    role="img"
    aria-label="Signature"
    viewBox="0 0 300 100"
    fill="none"
    style="--draw:{{ $dur }}; --n:{{ $count }};"
    {{ $attributes->merge(['class' => $colorClass.' inline-block overflow-visible']) }}
>
    @foreach ($signaturePaths as $i => $d)
        {{-- The draw animation lives in ui.css (keyed on [data-slot="signature"]
             path inside the motion-safe scope), driven by --draw (total), --n
             (stroke count) and per-path --i (stagger index). A Tailwind arbitrary
             animate-[…calc(var(--draw)/n)…] value does NOT compile, so the
             animation is declared in the stylesheet instead. Reduced-motion users
             get the fully drawn signature (no dash, see ui.css). --}}
        <path
            d="{{ $d }}"
            stroke="currentColor"
            stroke-width="{{ $strokeWidth }}"
            stroke-linecap="round"
            stroke-linejoin="round"
            pathLength="1"
            style="--i: {{ $i }};"
        />
    @endforeach
</svg>