Ink Canvas
A sumi-e brush on rice paper: speed changes the stroke, ink bleeds, flicks splatter, the brush runs dry.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Slow strokes are heavy and wet, fast ones thin and broken. The brush carries a limited load of ink (dip it again), edges bleed softly, and quick flicks leave splatter. Save your drawing as PNG.
Installation
$ npx shadcn@latest add https://guetix.com/r/ink-canvas.json
Uses the shadcn CLI. It creates components/guetix/ink-canvas.tsx and installs nothing else.
Usage
example.tsx
import { InkCanvas } from "@/components/guetix/ink-canvas";
export default function Example() {
return <InkCanvas />;
}
Signature padsArt portfoliosPlayful about pages
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Width is driven by pointer velocity with smoothing, not by pressure, so it works with a mouse.
- 02Dry-brush texture comes from punching tiny holes with destination-out.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ink | string | "#141210" | Ink color. |
| paper | string | "#f3ecdc" | Paper color. |
| size | number | 26 | Max brush size (px). |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Canvas is labelled; all actions are real buttons.