Wave Strands
WebGL hero background using React Three Fiber with 3D strand-style geometry and simple presets (DNA, magnetic, cosmic). It gently responds to cursor movement with attraction, repulsion, and depth. Renders behind content in a container-scoped canvas and respects reduced-motion settings.
Default
DNA preset with default swirl interaction
Sign in to view this example's source code.
Sign inDNA preset
Intertwining strands with violet accent
Sign in to view this example's source code.
Sign inCosmic with children
Cosmic preset behind hero copy
Hero background
Flowing energy strands
Foreground content stays fully interactive while the WebGL layer animates behind it.
Sign in to view this example's source code.
Sign inMagnetic repel
Magnetic preset with stronger repel interaction
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Foreground above the WebGL layer (clicks/hover work normally). |
| color | string | #22d3ee | Strand accent color (hex) |
| preset | "dna" | "magnetic" | "cosmic" | "dna" | Visual tuning bundle - intertwining twist, energetic motion, or deep parallax drift |
| strands | number | preset default (10–14) | Number of animated strands (clamped 6–20) |
| speed | number | preset default | Animation speed multiplier |
| thickness | number | 1.5 | Strand line thickness in world units |
| interaction | "none" | "swirl" | "repel" | "attract" | "swirl" | Cursor deformation mode; swirl twists nearby strands with smooth falloff |
| interactionStrength | number | 0.55 | Cursor influence intensity (clamped) |
| interactionRadius | number | 1.2 | World-space falloff radius for cursor effects |
| depth | number | 1 | Z-depth spread multiplier for parallax layering |
| glow | boolean | true | Additive glow pass behind each strand |
| minDecoHeight | number | 280 | When there are no children, minimum height (px) of the pattern area |