Chalk Dust

A rich drawing experience on a dark board background. As you draw with your cursor or finger, chalk dust specks scatter along the stroke, each with a unique seed for deterministic grain. The dust gradually fades over time, like real chalk wearing away. Includes an erase button to clear the board. Built with pointer events for smooth, pressure-sensitive input.

chalk-dust-preview

Draw to leave a trail

Loading preview...

Why it helps: Chalk dust captures the tactile, imperfect feel of real chalk. The gradual fade adds a sense of time passing - your marks don't last forever, which makes drawing feel more human and less digital.

Also good to know:

-Canvas-based rendering means no DOM accessibility for drawn content
-Multiple strokes can pile up - the 40-stroke cap helps but old strokes may still overlap
-The grain effect is deterministic but random-looking, so it won't perfectly match real chalk texture

Source

components/live/ChalkDust.tsx

// Loading source...

Usage

example.tsx

import { ChalkDust } from "@/components/live/ChalkDust";

<ChalkDust
  boardColor="#2c3b32"
  color="#f4f1ea"
  duration={5200}
/>
import { ChalkDust } from "@/components/live/ChalkDust";

<ChalkDust
  boardColor="#2c3b32"
  color="#f4f1ea"
  duration={5200}
/>

Props

color"#f4f1ea"

string

Chalk color as a hex string.

boardColor"#2c3b32"

string

Background color of the chalkboard.

duration5200

number

How long dust specks last in milliseconds before fading.

lineWidth2.4

number

Base radius of the chalk stroke.

grain1

number

Multiplier for dust speck density.

showEraseHinttrue

boolean

Show the hint pill at the bottom.

className-

string

Additional CSS classes.