Wave Strands
Flagship WebGL hero background: React Three Fiber strands with DNA / magnetic / cosmic presets, real 3D line geometry, smoothed cursor interaction, depth layering, optional glow, visibility throttling, and reduced-motion scaling. Internal Canvas behind optional children.
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 |