Documentation
What it does
A field of flowing lines that responds to the cursor and, optionally, to scrolling.
It has five presets and a custom mode, and the presets are worth using — they're complete looks, not starting points.
Controls
26 controls, 18 of which only appear when they are relevant.
Control | Type | Default | Notes |
|---|---|---|---|
Preset | Enum | Custom / Silk / Breeze / Storm / Topography / Electric — default | — |
Background | Color |
| — |
Color Mode | Enum | Solid / Gradient — default | — |
Line Color | Color |
| conditional |
Start Color | Color |
| conditional |
End Color | Color |
| conditional |
Gradient Angle | Number |
| 0–360° · conditional |
Hue Cycle | Boolean |
| conditional |
Hue Speed | Number |
| .1–4 · conditional |
Angle | Number |
| 0–180° · 0° is vertical lines, 90° is horizontal. |
Perspective | Number |
| 0–1 · Compresses line spacing toward one side. |
Line Gap | Number |
| 4–80px · conditional |
Detail | Number |
| 10–80px · Distance between curve points. Smaller is smoother. · conditional |
Thickness | Number |
| .5–6px · conditional |
Amplitude | Number |
| 0–120 · conditional |
Speed | Number |
| 0–4 · conditional |
Depth | Number |
| 0–1 · Fades and thins a share of lines for a layered look. · conditional |
Edge Fade | Number |
| 0–45% |
Fade Sides | Enum | All / Left & Right / Top & Bottom — default | conditional |
Enabled | Boolean |
| — |
Mode | Enum | Push / Vortex — default | conditional |
Radius | Number |
| 50–500px · conditional |
Strength | Number |
| .1–3 · conditional |
Click Ripple | Boolean |
| conditional |
Scroll React | Boolean |
| — |
Scroll Boost | Number |
| .1–3 · conditional |
Working through the panel
Preset and colour
Silk, breeze, storm, topography and electric. They're genuinely distinct: topography reads as a contour map, storm is dense and agitated, silk is calm.
On Custom you get the full colour system. Color Mode is solid or gradient — gradient reveals start and end colours plus an angle.
And Hue Cycle rotates the whole palette over time, with a speed control. It's off by default, and it's the cheapest way to keep a static section alive.
The lines
Line Gap is the spacing, Thickness is the weight, Detail is how finely each line is drawn.
Amplitude is how far they move — the main character control. Speed is the flow rate, and Depth adds variation so lines at different distances behave differently.
Angle rotates the whole field, and Perspective tilts it into depth rather than keeping it flat.
Edge Fade dissolves the lines toward the frame boundary, with a Fade Sides control for which edges. On a section background this is what stops the effect looking like a rectangle pasted onto the page.
Interaction
The Cursor group is on by default. Mode is push or vortex — push shoves lines away from the pointer, vortex swirls them around it. Radius is how far the influence reaches, Strength is how much, and Click Ripple sends a wave out on click.
Then Scroll React, which is off by default. Turn it on and scrolling accelerates the field, with a Scroll Boost control for how much.
That one is worth turning on if the section is tall. It ties the background to what the visitor is actually doing, rather than animating away regardless.
Performance and limits
It stops rendering when it scrolls out of view, so an instance below the fold costs nothing until the visitor reaches it.
Static rendering is handled, so canvas thumbnails and exports show a settled frame rather than a blank box.
Good to know
No setup or coding required. Responsive across desktop, tablet, and mobile.
Refund policy — due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.
Support: hi@alicorak.com
