Flow Lines
Neon strands drifting over a mirror floor, with waves you can launch from either end or the middle — and strings you can pluck by hand.
Flow Lines is a neon-strand composition in the Lines category. Luminous ribbons drift above a mirror floor, each one a razor-thin white filament inside a wide colored halo whose hue sweeps across the frame and slides as a track plays. Every strand carries the live waveform along its length, and the crest travels — sound entering at one point runs outward from it. Waves can be launched from the left end, the right end, or the middle, and you can grab a strand with the mouse, pull it, and let it snap back. Flow Lines requires WebGPU; see Browser Support for current platform details.
Open Flow Lines
Launch the visualizer with its matching left-nav entry selected.
Plucking a strand
Drag on the canvas with the left mouse button to grab the nearest strand at that point and pull it. Let go and it springs back, sending a crest running outward in both directions from where you released it — the same wave the music launches on a beat. Orbit the scene with the right mouse button and zoom with the wheel.
Presets
Neon Drift is the signature look: a small bundle drifting over the mirror. Single String reduces the field to one sharp filament, the clearest way to watch a wave travel. Deep Arc bows two strands far into depth and turns the wall mirror on. Ember Tide narrows the palette to reds and oranges; Shockwave launches hard crests from the middle on every beat; Deep Field stacks nine soft strands across a wide sweeping camera.
Quick start
- Start the demo track, choose a local audio file, or enable a live input.
- Try a preset or style first, then open the section for the part of the image you want to change.
- On a control with Assign modulation, open the source picker, choose a signal, and watch the slider's live fill.
- Use Reset to Defaults whenever you want to return to the original look.
Presets and styles
Neon Drift · Single String · Deep Arc · Ember Tide · Shockwave · Deep Field
Audio modulation
On a control with Assign modulation, select the activity icon to open Modulate with. Choose a named source, or choose — None to leave the control unmodulated. After you assign one, its name appears below the slider; select that name to edit the route, or use Clear modulation to remove it. The slider track shows the live signal reaching the control.
| Modulated control | Section | What the route changes |
|---|---|---|
| Wave Height | Core | Sets the visible wave height. |
| Arc | Core | Bows the strands away from the lens in the middle so the ends come forward, drawing them into a tight bright waist at the center of the frame. An assigned source deepens or relaxes that bow from the displayed base. |
| Flow Speed | Flow | Sets how quickly flow changes or moves. |
| Wave Scale | Flow | Sets the visual wave scale. |
| Waveform Depth | Flow | Sets how far the live waveform lifts and bends each strand. |
| Ripple | Flow | Controls ripple; higher values increase the effect and lower values reduce it. |
| Halo Width | Glow | Sets how wide the halo spreads. |
| Halo Brightness | Glow | Drives the colored halo around the filament. |
| Core Brightness | Glow | Drives the white-hot filament at the center of each strand. |
| Bloom Strength | Glow | Sets the visible bloom strength. |
| Base Hue | Colors | Moves the color around the color spectrum. |
| Hue Sweep | Colors | Sets how much of the color wheel the strands sweep through across the frame. |
| Saturation | Colors | Moves colors from muted toward vivid. |
| Reflection | Mirror | Controls how strongly the surrounding scene is reflected. |
| Wall Reflection | Mirror | Sets how much light the back wall returns. |
Settings reference
Core
| Setting | Available values | What it changes |
|---|---|---|
| Ribbons | 1–12 | Controls ribbons; higher values increase the effect and lower values reduce it. |
| Wave Height | 0.2–8 | Sets the visible wave height. Use Assign modulation to choose a source. |
| Depth Spread | 0–40 | Controls how far elements separate from the center or from one another. |
| Bundle Spread | 0%–100% | Sets how far the strands wander from one another. Low values keep them on nearly the same path, so the bundle sweeps the frame as one arc and the soft strands pile up into a colored mass beside the sharp one; high values let each strand find its own course and the bundle opens into a braid. |
| Arc | 0–90 | Bows the strands away from the lens in the middle so the ends come forward, drawing them into a tight bright waist at the center of the frame. An assigned source deepens or relaxes that bow from the displayed base. Use Assign modulation to choose a source. |
| Arc Angle | -1–1 | Yaws the bow so one end reads nearer than the other instead of the composition mirroring about the center. |
| Floor Clearance | 0–6 | Controls floor clearance; higher values increase the effect and lower values reduce it. |
| Span | 30–200 | Controls span; higher values increase the effect and lower values reduce it. |
| Segments | 128–1536 | Sets how many divisions form the visible shape. |
Flow
| Setting | Available values | What it changes |
|---|---|---|
| Wave Origin | LEFT, MIDDLE, RIGHT, ALTERNATE | Chooses where travelling waves are born: the left end, the right end, the middle (crests leave in both directions at once), or Alternate to rotate between them. |
| Flow Speed | 0–3 | Sets how quickly flow changes or moves. Use Assign modulation to choose a source. |
| Wave Scale | 0.5–10 | Sets the visual wave scale. Use Assign modulation to choose a source. |
| Waveform Depth | 0–3 | Sets how far the live waveform lifts and bends each strand. Use Assign modulation to choose a source. |
| Travel Speed | 0.05–1.5 | Sets how fast a launched crest runs outward from its origin. |
| Travel Damping | 0.1–4 | Sets how quickly a travelling crest fades as it goes. |
| Ripple | 0–1.5 | Controls ripple; higher values increase the effect and lower values reduce it. Use Assign modulation to choose a source. |
Glow
| Setting | Available values | What it changes |
|---|---|---|
| Halo Width | 0.05–3 | Sets how wide the halo spreads. Use Assign modulation to choose a source. |
| Halo Brightness | 0–4 | Drives the colored halo around the filament. Use Assign modulation to choose a source. |
| Core Brightness | 0–20 | Drives the white-hot filament at the center of each strand. Use Assign modulation to choose a source. |
| Soft Spread | 0–1 | Fans the bundle between sharp filaments and broad soft plumes. At zero every strand is a hard-edged line; higher values push the rearmost strands into wide diffuse glow. |
| Bloom | On / Off | Turns bloom on or off. |
| Bloom Strength | 0–2 | Sets the visible bloom strength. Use Assign modulation to choose a source. |
Colors
| Setting | Available values | What it changes |
|---|---|---|
| Base Hue | 0°–360° | Moves the color around the color spectrum. Use Assign modulation to choose a source. |
| Hue Sweep | 0%–200% | Sets how much of the color wheel the strands sweep through across the frame. Use Assign modulation to choose a source. |
| Hue Drift | 0–0.3 | Slides the whole color sweep sideways over time. |
| Saturation | 0%–100% | Moves colors from muted toward vivid. Use Assign modulation to choose a source. |
Mirror
| Setting | Available values | What it changes |
|---|---|---|
| Mirror Floor | On / Off | Turns mirror floor on or off. |
| Reflection | 0%–150% | Controls how strongly the surrounding scene is reflected. Use Assign modulation to choose a source. |
| Floor Roughness | 0%–100% | Roughens the floor so the reflection spreads from a sharp mirror into a broad diffuse wash. |
| Horizon Fade | 0%–100% | Fades the reflection toward the viewer so the floor reads as a mirror rather than glass. |
| Wall Mirror | On / Off | Adds a second mirror behind the strands so their glow bounces back into the upper frame. |
| Wall Reflection | 0%–150% | Sets how much light the back wall returns. Use Assign modulation to choose a source. |
| Wall Roughness | 0%–100% | Roughens the back wall. A polished wall mirrors the strands; a rough one returns their glow as a soft bounce. |
| Wall Distance | 25–200 | Moves the back wall nearer or further behind the strands. |
Audio
| Setting | Available values | What it changes |
|---|---|---|
| Audio Enabled | On / Off | Turns audio enabled on or off. |
| Smoothing | 0.01–0.99 | Balances immediate audio response against steadier motion. |
| Master Gain | 0x–3x | Sets how strongly the input signal affects master. |
| Bass Intensity | 0x–3x | Sets the visible bass intensity. |
| Mid Intensity | 0x–3x | Sets the visible mid intensity. |
| High Intensity | 0x–3x | Sets the visible high intensity. |
Camera
| Setting | Available values | What it changes |
|---|---|---|
| View | GRAZING, LOW, WIDE, RAISED | Chooses the view mode or style. |
| Motion | STILL, DRIFT, SWEEP | Chooses the motion mode or style. |
| Camera Speed | 0.05–2 | Sets how quickly camera changes or moves. |
| Mouse Parallax | 0%–100% | Controls mouse parallax; higher values increase the effect and lower values reduce it. |
Some controls appear only after you enable a related mode or style. The settings panel always reflects the options available for the current selection.
Tips for a better audio visualization
- Give bass the larger structural motion and highs the fine detail or glow; the frequency split keeps the composition legible.
- Try assigning Bass to Wave Height, then compare Mid, High, and Volume while the demo track plays. The slider's live fill shows the signal reaching that control.