Dot Surface

The sea under the page: a field of ink dots laid out in perspective, swelling in slow traveling waves, the crests warming toward the ember accent for a moment. Plain canvas, live theme tokens, no WebGL, no dependencies.

Draw

draw a card

$npx shadcn@latest add @clow/dot-surface

First time? Point @clow at the registry

Once per project, add the registry to your components.json. Then draw any card by name.

"registries": {
  "@clow": "https://clow.cards/r/{name}.json"
}

Full setup →

Playground

The sea under the page

Ink dots swell in slow waves; the crests catch the light.

props

intensity

speed

spacing

accents

<DotSurface />

Examples

basic

backgrounds

The sea under the page

Ink dots swell in slow waves; the crests catch the light.

Props

prop	type	default
intensity	faint \| soft \| bold	soft
speed	slow \| base \| fast	base
spacing	number	26
accents	boolean	true