A canvas wordmark that turns into dashed vector outlines under the pointer, with a selection frame, labels and draggable letters.
Move the pointer over the text, or drag a letter off the baseline. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "UI Library" | The wordmark to render. |
fontFamily | string | "" | Any font family loaded on the page. Leave empty to inherit the font of the container. |
fontWeight | number | 600 | Weight of the wordmark. |
fontSize | number | 150 | Largest font size in px. The wordmark shrinks to fit narrower containers. |
letterSpacing | number | -0.05 | Extra space between letters, in em. |
color | string | "#ffffff" | Colour of the letters and their outlines. |
accentColor | string | "#ffffff" | Colour of the selection frame, connector and labels. |
reveal | "area" | "letter" | "off" | "letter" | Area fades the letters into outlines inside a circle around the pointer. Letter turns only the active letter into its outline. Off keeps every letter solid. |
reach | number | 200 | Radius around the pointer where the letters turn into vector outlines, in px. |
softness | number | 0.7 | How gradually the fill hands over to the outlines. 0 is a hard edge. |
dashLength | number | 4 | Length of each outline dash, in px. |
dashGap | number | 2 | Space between outline dashes, in px. |
lineStyle | "dashed" | "solid" | "dashed" | How the outlines under the pointer are drawn. Only the outer silhouette is traced either way. |
strokeWidth | number | 1.5 | Thickness of the outline, in px. |
specks | number | 15 | Tiny squares that blink and respawn around the active letter, seeded per letter. 0 turns them off. |
selection | boolean | true | Frame the letter under the pointer. The frame glides from letter to letter. |
labels | boolean | true | Label the frame with the letter and its size, or with its offset while dragged. |
draggable | boolean | true | Let letters be dragged off the baseline. They spring back home on release. |
sweep | boolean | true | Sweep the reveal across the wordmark on its own while the pointer is away. |
speed | number | 1 | Speed of the idle sweep. |
Keyboard shortcuts and ARIA behavior.