A trail of dithered dots that follows the cursor and bends the scene behind it.
Unlock component
One license unlocks every pro feature for life, including the ones we haven't built yet.
Already have an account? Sign in
| Name | Type | Default | Description |
|---|---|---|---|
pixelSize | number | 10 | Width of one dither cell in pixels. Each cell holds a 4x4 block of dots. |
color | string | "#fff7ee" | Color of the dots. |
intensity | number | 1.03 | Scales cursor speed into dot coverage. Higher values fill a cell sooner. |
distortion | number | 4 | How far the velocity field pushes the scene behind the trail. 0 leaves it undistorted. |
aberration | number | 2 | How far the red and blue channels separate along the direction of travel. 0 keeps them aligned. |
inversion | number | 0.3 | Inverts color where the trail crosses WebGL content. HTML behind the canvas does not invert it. |
force | number | 1.68 | Multiplies pointer movement before it enters the field. |
radius | number | 0.06 | Reach of a single pointer event across the field. |
decay | number | 0.9 | Per-frame survival of the field, normalized to 60 Hz. Lower values shorten the trail. |
blendFunction | BlendFunction | NORMAL | Blend mode used to composite the effect. |
React Three Fiber
React renderer for Three.js
@react-three/postprocessing
Post-processing effects for React Three Fiber
Drei
React Three Fiber utilities.