Scramble
SoonHeadline letters resolve from a scramble of glyphs into the final words.
Code
Updates live with your settings.
Preparing the code…
How to use
- 1
Add the files
Copy the files from the Code section into a folder named
drifting-dots/in your project. They are plain TypeScript; the React wrapper is one file and the engine does not depend on it. - 2
Drop in the component
Place
<DriftingDots />inside a positioned container with a size; it fills the container. Every setting is a prop, and changing a prop updates the running effect. - 3
Other frameworks
Vue, Svelte, Astro or plain HTML: use the engine directly, or copy the AI Prompt and let your assistant write the wrapper for your stack. The prompt carries this exact code.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number 0–300 | 60 | How many dots. |
| size | number 1–12 px | 3 | Base dot radius. |
| blur | number 0–8 px | 0 | Softens every dot. |
| color | string (#hex) | "#ffffff" | Dot colour. |
| background | string (#hex) | "#0a0a0a" | Painted behind the dots. |
| speed | number 0–4 x | 1 | Drift speed. |
Performance
- Bundle
- ~2 KB gzipped
- Cost
- Low
- Renders on
- CPU (Canvas 2D)
- Reduced motion
- Respected
- Stand-in engine. The real one is on its way.
Related
- Halftone BloomFree
Organic & Nature
A photo rendered as a field of glowing dots that blooms open, settles to a pale stage, then warms to your colour.
- VinesSoon
Organic & Nature
Tendrils that grow along the edges of a section and curl toward the pointer.
- Ink TrailSoon
Cursor & Pointer
A soft ink line that follows the cursor and fades like a wet brushstroke.