An ink brush that paints behind the cursor
| Name | Type | Default | Description |
|---|---|---|---|
colors | [string, string] | ["#5227FF", "#FF9FFC"] | The two inks. The brush drifts from one to the other as it travels, and where they overlap they mix like real pigment. |
backgroundColor | string | "transparent" | Background of the component. Leave it transparent to paint over your own page. |
mode | "auto" | "watercolor" | "gouache" | "auto" | Watercolor is transparent ink that multiplies into light pages, with a soft bleed around every stroke. Gouache is opaque paint for dark pages. Auto picks one from the background behind the component and follows theme changes. |
size | number | 14 | Brush radius in pixels. Fast strokes come out thinner, like a real brush. |
bloom | number | 0.9 | Seconds each drop of ink takes to open up after it lands, so the stroke swells gently behind the brush. |
bleed | number | 0.5 | How far a soft halo of ink creeps into the paper around each stroke while it sits. Shown on light pages only. |
edge | number | 0.6 | Darkening that gathers along the edges as the ink dries. |
roughness | number | 0.3 | How organic the edges are, from perfectly smooth to softly irregular. |
grain | number | 0.35 | Paper texture in the ink. |
intensity | number | 1 | Ink strength. |
fade | number | 3.5 | Seconds each part of the stroke lasts. The oldest ink evaporates first, so the trail thins and retracts toward the brush. |
follow | number | 0.06 | Seconds the brush trails behind the pointer. A little lag turns shaky movement into smooth curves. |
colorCycle | number | 700 | Distance in pixels the brush travels to go from the first ink to the second and back. 0 paints with the first ink only. |
splash | boolean | true | Clicking or tapping splashes a drop of ink: droplets fly out, land and bloom. |
autoplay | boolean | true | Until the pointer arrives, and again after it leaves, an invisible hand keeps painting. |
autoplaySpeed | number | 1 | Speed of that invisible hand. |
idleDelay | number | 1.5 | Seconds after the pointer leaves before the invisible hand picks up the brush again. |
interactive | boolean | true | Let the pointer and touch paint. The component listens on the window, so content laid over it still paints. |
paused | boolean | false | Freezes the ink. Reduced-motion users never get the invisible hand. |
quality | "low" | "medium" | "high" | "medium" | Resolution the ink is shaped at. High draws the finest edges on high-density screens. |
dpr | number | 2 | Maximum device pixel ratio for the canvas. |
ref | { splash, clear } | — | Imperative controls: splash ink at a point (in pixels from the top-left corner), or wipe the paper clean. |
children | ReactNode | — | Content rendered above the ink, such as a hero. |
className | string | — | Classes for the root element. It fills its parent, with a 320px minimum height. |
style | CSSProperties | — | Inline styles for the root element. |
colors[string, string]The two inks. The brush drifts from one to the other as it travels, and where they overlap they mix like real pigment.
["#5227FF", "#FF9FFC"]backgroundColorstringBackground of the component. Leave it transparent to paint over your own page.
"transparent"mode"auto" | "watercolor" | "gouache"Watercolor is transparent ink that multiplies into light pages, with a soft bleed around every stroke. Gouache is opaque paint for dark pages. Auto picks one from the background behind the component and follows theme changes.
"auto"sizenumberBrush radius in pixels. Fast strokes come out thinner, like a real brush.
14bloomnumberSeconds each drop of ink takes to open up after it lands, so the stroke swells gently behind the brush.
0.9bleednumberHow far a soft halo of ink creeps into the paper around each stroke while it sits. Shown on light pages only.
0.5edgenumberDarkening that gathers along the edges as the ink dries.
0.6roughnessnumberHow organic the edges are, from perfectly smooth to softly irregular.
0.3grainnumberPaper texture in the ink.
0.35intensitynumberInk strength.
1fadenumberSeconds each part of the stroke lasts. The oldest ink evaporates first, so the trail thins and retracts toward the brush.
3.5follownumberSeconds the brush trails behind the pointer. A little lag turns shaky movement into smooth curves.
0.06colorCyclenumberDistance in pixels the brush travels to go from the first ink to the second and back. 0 paints with the first ink only.
700splashbooleanClicking or tapping splashes a drop of ink: droplets fly out, land and bloom.
trueautoplaybooleanUntil the pointer arrives, and again after it leaves, an invisible hand keeps painting.
trueautoplaySpeednumberSpeed of that invisible hand.
1idleDelaynumberSeconds after the pointer leaves before the invisible hand picks up the brush again.
1.5interactivebooleanLet the pointer and touch paint. The component listens on the window, so content laid over it still paints.
truepausedbooleanFreezes the ink. Reduced-motion users never get the invisible hand.
falsequality"low" | "medium" | "high"Resolution the ink is shaped at. High draws the finest edges on high-density screens.
"medium"dprnumberMaximum device pixel ratio for the canvas.
2ref{ splash, clear }Imperative controls: splash ink at a point (in pixels from the top-left corner), or wipe the paper clean.
—childrenReactNodeContent rendered above the ink, such as a hero.
—classNamestringClasses for the root element. It fills its parent, with a 320px minimum height.
—styleCSSPropertiesInline styles for the root element.
—