ThreadUnravel

A single continuous stroke path that unravels and restitches to form each digit. Uses SVG stroke-dashoffset animation for a hand-drawn effect.

GitHub

Install

npm install animated-digit-transitions

Usage

import { ThreadUnravel } from "animated-digit-transitions";

export function MyComponent() {
  const [digit, setDigit] = useState(0);
  return <ThreadUnravel value={digit} size={64} />;
}

Props

Prop	Type	Default	Description
value	number	0	Digit to display (0-9)
size	number	64	Width in pixels. Height is 1.5x width.