Stipple & Pointillism

Organic Poisson-disc blue-noise pointillism engine with real-time Verlet pointer repulsion physics and image luminance sampling.

Interactive Playground

Move cursor over canvas to interact

Source Type

Headline String

Font Weight

Size110px

Pattern Distribution

Variant

Sampling Density1.1x

Point Radius1.4px

Repulsion90px

Spring0.09

Cursor Physics

Anatomy

import { StippleText, StippleImage } from "@shavin/fx";

// Headline Typography Stippling
<StippleText text="SHAVIN" fontSize={120} density={1.2} />

// Raster / Vector Image Stippling
<StippleImage src="/assets/hq_marshall.jpg" density={1.0} />

Examples

Interactive Headline

Real-time Poisson-disc particle text with cursor repulsion physics.

<StippleText
  text="SHAVIN.FX"
  fontSize={80}
  density={1.0}
  dotRadius={1.3}
  tint="fg"
  interactive={true}
  className="w-full h-40"
/>

Photography Luminance Mapping

Poisson-disc pointillism driven by photo luminance and shadow density.

<StippleImage
  src="/assets/hq_marshall.jpg"
  density={1.2}
  dotRadius={1.2}
  colorMode="preserve"
  interactive={true}
  className="w-full max-w-xs"
/>

Props Reference

Prop	Type	Default	Description
type	"text" \| "image"	"text"	Selects whether to sample typography or raster image pixels.
text	string	"SHAVIN"	Headline text string to rasterize and sample.
src	string \| ThemedValue<string>	—	Image URL or theme-aware { light, dark } image source object.
pattern	"grid" \| "stochastic" \| "organic"	"grid"	Dot distribution algorithm: 'grid' (ordered matrix) or 'stochastic' (Poisson-disc blue noise).
density	number	1.0	Sampling density multiplier scaling blue-noise particle counts.
dotRadius	number	1.2	Radius of individual dots in device pixels.
interactive	boolean	true	Enables real-time Verlet mouse repulsion physics.
repulsionRadius	number	100	Pixel radius of pointer repulsion force field.
springStiffness	number	0.09	Spring return coefficient pulling particles back to rest positions.
colorMode	"preserve" \| "tint" \| "auto-invert"	"tint"	Color pipeline mode: true color, token tint, or lightness inversion.
tint	ThemedColor	"fg"	Semantic token or custom color used for particle tinting.