← All components
Atmospheres / background
Threads
Forty fine strands move through a field of smooth procedural noise.
Open in studio ↗PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Give the background an explicitly sized parent. Demo.tsx contains the full example composition.
- The original shader equations are preserved. Reduced motion renders a still frame; hidden/offscreen instances stop requesting frames.
- A CSS fallback remains without WebGL. Canvas dimensions are bounded at 2048 pixels. Pointer response is decorative and has no essential content.
React 19WebGL2OGL 1.0.11
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | [number, number, number] | "#ffffff" | Thread color |
amplitude | number | 1 | Wave amplitude |
distance | number | 0 | Strand separation |
enableMouseInteraction | boolean | false | Pointer response |
speed | number | 1 | Motion speed |
time | number | undefined | Explicit shader time in seconds before speed scaling; stops automatic frames. |
paused | boolean | false | Freeze time and pointer response. |
replayToken | number | 0 | Change to restart the animation. |
className | string | '' | Additional outer classes. |