Stipple Type

A marbled-ink headline that swirls and breaks into stipple as you stir it

stipple-type-tw

Customize

Text

Vein

Thread

Base

Band Size

0.50

Waviness

1.20

Grain

0.00

Grain Size

2.0px

Dot Size

1.00

Current

1.00

Font Size

124px

Font Weight

800

Letter Spacing

-0.020em

Line Height

1.00

Stir Strength

1.00

Stir Radius

0.50

Drop Size

0.50

Viscosity

0.50

Memory

8.0s

Intro Duration

1.8s

Drop InkIntroInteractivePaused

Props

Name	Type	Default	Description
`text`	string	`"Made by hand"`	The headline. It wraps onto as many lines as it needs.
`colors`	[string, string]	`["#3F3F46", "#A1A1AA"]`	The two inks marbled through the headline: the broad veins, and the fine threads between them. Click drops are also drawn from these and the base.
`baseColor`	string	`"#F4F4F5"`	The colour of the marbling bath the inks float on, which is the body colour of the headline. Use a pale base on dark pages and a deep one on light pages.
`bandSize`	number	`0.5`	Spacing of the veins as a fraction of the font size.
`waviness`	number	`1.2`	How much the veins meander, from 0 (straight bands) to 2.
`grain`	number	`0`	How stippled the ink looks at rest, from 0 (smooth, the grains only show where you stir) to 1 (a dot print everywhere).
`grainSize`	number	`2`	Spacing of the stipple grains in pixels at the full font size.
`dotSize`	number	`1`	Size of each grain once the ink breaks apart, from 0.3 to 2.
`current`	number	`1`	Speed of the slow current that keeps the marbling drifting. 0 holds it still.
`fontFamily`	string	`inherited`	Font for the headline. Leave unset to use the page font.
`fontWeight`	number	`800`	Font weight. Heavy weights show more of the marbling.
`fontSize`	number	`124`	Largest font size in pixels. The headline shrinks to fit the frame when it needs to.
`letterSpacing`	number	`-0.02`	Letter spacing in em.
`lineHeight`	number	`1`	Line height as a multiple of the font size.
`interactive`	boolean	`true`	Moving the pointer through the headline stirs the ink: it swirls along with your stroke and breaks into stipple grains where the flow is fast, then knits back together.
`stirStrength`	number	`1`	How hard the pointer stirs, from 0 to 3.
`stirRadius`	number	`0.5`	Width of the stirring stroke, as a multiple of the font size.
`dropInk`	boolean	`true`	Clicking or tapping drops a bead of ink that spreads out and pushes the marbling aside, like paint dropped on a marbling bath.
`dropSize`	number	`0.5`	Radius of each drop, as a multiple of the font size.
`viscosity`	number	`0.5`	Thickness of the bath, from 0 (thin, swirls keep turning) to 1 (thick, every stroke stops quickly).
`memory`	number	`8`	Seconds the swirls and drops take to fade back into the original marbling.
`intro`	boolean	`true`	The headline is stippled in from the left, grain by grain, and the grains then flow together into ink. It plays when the headline first comes into view and again when the text changes.
`introDuration`	number	`1.8`	Length of the intro in seconds.
`paused`	boolean	`false`	Freeze the marbling and ignore the pointer. Reduced-motion users always get this still print, without the intro.
`quality`	number	`1`	Resolution scale from 0.25 to 1.
`ref`	{ drop, stir, replay }	`—`	drop(x, y, size) drops ink at a point given as fractions of the headline. stir(from, to, duration) draws a stirring stroke between two such points. replay() plays the intro again.
`children`	ReactNode	`—`	Content placed over the headline.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

textstring

The headline. It wraps onto as many lines as it needs.

Default"Made by hand"

colors[string, string]

The two inks marbled through the headline: the broad veins, and the fine threads between them. Click drops are also drawn from these and the base.

Default["#3F3F46", "#A1A1AA"]

baseColorstring

The colour of the marbling bath the inks float on, which is the body colour of the headline. Use a pale base on dark pages and a deep one on light pages.

Default"#F4F4F5"

bandSizenumber

Spacing of the veins as a fraction of the font size.

Default0.5

wavinessnumber

How much the veins meander, from 0 (straight bands) to 2.

Default1.2

grainnumber

How stippled the ink looks at rest, from 0 (smooth, the grains only show where you stir) to 1 (a dot print everywhere).

Default0

grainSizenumber

Spacing of the stipple grains in pixels at the full font size.

Default2

dotSizenumber

Size of each grain once the ink breaks apart, from 0.3 to 2.

Default1

currentnumber

Speed of the slow current that keeps the marbling drifting. 0 holds it still.

Default1

fontFamilystring

Font for the headline. Leave unset to use the page font.

Defaultinherited

fontWeightnumber

Font weight. Heavy weights show more of the marbling.

Default800

fontSizenumber

Largest font size in pixels. The headline shrinks to fit the frame when it needs to.

Default124

letterSpacingnumber

Letter spacing in em.

Default-0.02

lineHeightnumber

Line height as a multiple of the font size.

Default1

interactiveboolean

Moving the pointer through the headline stirs the ink: it swirls along with your stroke and breaks into stipple grains where the flow is fast, then knits back together.

Defaulttrue

stirStrengthnumber

How hard the pointer stirs, from 0 to 3.

Default1

stirRadiusnumber

Width of the stirring stroke, as a multiple of the font size.

Default0.5

dropInkboolean

Clicking or tapping drops a bead of ink that spreads out and pushes the marbling aside, like paint dropped on a marbling bath.

Defaulttrue

dropSizenumber

Radius of each drop, as a multiple of the font size.

Default0.5

viscositynumber

Thickness of the bath, from 0 (thin, swirls keep turning) to 1 (thick, every stroke stops quickly).

Default0.5

memorynumber

Seconds the swirls and drops take to fade back into the original marbling.

Default8

introboolean

The headline is stippled in from the left, grain by grain, and the grains then flow together into ink. It plays when the headline first comes into view and again when the text changes.

Defaulttrue

introDurationnumber

Length of the intro in seconds.

Default1.8

pausedboolean

Freeze the marbling and ignore the pointer. Reduced-motion users always get this still print, without the intro.

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1.

Default1

ref{ drop, stir, replay }

drop(x, y, size) drops ink at a point given as fractions of the headline. stir(from, to, duration) draws a stirring stroke between two such points. replay() plays the intro again.

Default—

childrenReactNode

Content placed over the headline.

Default—

classNamestring

Classes for the root element. It fills its parent, with a 240px minimum height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

text

string

"Made by hand"

The headline. It wraps onto as many lines as it needs.

colors

[string, string]

["#3F3F46", "#A1A1AA"]

The two inks marbled through the headline: the broad veins, and the fine threads between them. Click drops are also drawn from these and the base.

baseColor

string

"#F4F4F5"

The colour of the marbling bath the inks float on, which is the body colour of the headline. Use a pale base on dark pages and a deep one on light pages.

bandSize

number

0.5

Spacing of the veins as a fraction of the font size.

waviness

number

1.2

How much the veins meander, from 0 (straight bands) to 2.

grain

number

0

How stippled the ink looks at rest, from 0 (smooth, the grains only show where you stir) to 1 (a dot print everywhere).

grainSize

number

2

Spacing of the stipple grains in pixels at the full font size.

dotSize

number

1

Size of each grain once the ink breaks apart, from 0.3 to 2.

current

number

1

Speed of the slow current that keeps the marbling drifting. 0 holds it still.

fontFamily

string

inherited

Font for the headline. Leave unset to use the page font.

fontWeight

number

800

Font weight. Heavy weights show more of the marbling.

fontSize

number

124

Largest font size in pixels. The headline shrinks to fit the frame when it needs to.

letterSpacing

number

-0.02

Letter spacing in em.

lineHeight

number

1

Line height as a multiple of the font size.

interactive

boolean

true

Moving the pointer through the headline stirs the ink: it swirls along with your stroke and breaks into stipple grains where the flow is fast, then knits back together.

stirStrength

number

1

How hard the pointer stirs, from 0 to 3.

stirRadius

number

0.5

Width of the stirring stroke, as a multiple of the font size.

dropInk

boolean

true

Clicking or tapping drops a bead of ink that spreads out and pushes the marbling aside, like paint dropped on a marbling bath.

dropSize

number

0.5

Radius of each drop, as a multiple of the font size.

viscosity

number

0.5

Thickness of the bath, from 0 (thin, swirls keep turning) to 1 (thick, every stroke stops quickly).

memory

number

8

Seconds the swirls and drops take to fade back into the original marbling.

intro

boolean

true

The headline is stippled in from the left, grain by grain, and the grains then flow together into ink. It plays when the headline first comes into view and again when the text changes.

introDuration

number

1.8

Length of the intro in seconds.

paused

boolean

false

Freeze the marbling and ignore the pointer. Reduced-motion users always get this still print, without the intro.

quality

number

1

Resolution scale from 0.25 to 1.

ref

{ drop, stir, replay }

—

drop(x, y, size) drops ink at a point given as fractions of the headline. stir(from, to, duration) draws a stirring stroke between two such points. replay() plays the intro again.

children

ReactNode

—

Content placed over the headline.

className

string

—

Classes for the root element. It fills its parent, with a 240px minimum height.

style

CSSProperties

—

Inline styles for the root element.