# Line Waves

Aperveil / Light, shaped for the web.

Fine animated lines that part around the pointer. Tune Line Waves' spacing, amplitude and reach, then export the effect for React and WebGPU.

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

Line Waves draws flowing lines with a local pointer displacement. Line count sets density, amplitude shapes the wave, and line width keeps the stroke under direct control.

## Choose it for

Introduce an audio product without pretending the background is a live equalizer. Keep real product labels in HTML and use the line rhythm as the visual identity.

## Limits

The lines are pixels in one canvas, not SVG paths or editable chart series. There is no audio input or waveform analysis.

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/line-waves/edit?look=default)

## Install

Download the Export Kit from the editor. No shader-specific npm package or CLI is published yet.

```sh
npm install ./vendor/aperveil-runtime-0.1.0.tgz ./vendor/aperveil-react-0.1.0.tgz
```

Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU.

```tsx
"use client";

import LineWaves from "./LineWaves";

export default function Hero() {
  return (
    <LineWaves
      className="hero-shader"
      lineCount={34} background="#0a0d17ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }
```

Component props: `background`, `lineColor`, `accentColor`, `lineCount`, `amplitude`, `lineWidth`, `accentGlow`, `flowSpeed`, `pushStrength`, `pushReach`, `opacity`, `backgroundOpacity`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML.

## Controls

- Background (`background`, color): Colour behind the lines.
- Lines (`lineColor`, color): Colour of the lines.
- Accent (`accentColor`, color): Colour the lines take near the cursor.
- Lines (`lineCount`, slider): Only the lines that can reach a pixel are evaluated, so this does not change cost much.
- Amplitude (`amplitude`, slider): How high the lines wave.
- Line width (`lineWidth`, slider): In device pixels, so the field stays equally fine at any dpr.
- Accent glow (`accentGlow`, slider): How brightly the lines glow near the cursor.
- Flow speed (`flowSpeed`, slider): How fast the waves travel; 0 holds them still.
- Cursor push (`pushStrength`, slider): Proportional to the offset itself, so it vanishes at the centre instead of pinching every line to a point.
- Push reach (`pushReach`, slider): How far around the cursor the lines part.
- Opacity (`opacity`, slider): Opacity of the complete effect, including its background.
- Background opacity (`backgroundOpacity`, slider): Fade the background independently for transparent overlays.

## Compatibility

WebGPU rendering requires a supported browser and secure context. The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout. Text exports also retain readable HTML typography.

## Performance

2.163 ms GPU timestamp median; p95 3.08 ms. 1440x900 @ dpr 2; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-05. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

## Questions

### Can Line Waves react to music?

It has no audio input. Its animation uses time and pointer movement. Audio reactivity would require adding an input mapping to the exported source.

### What should I not use Line Waves for?

The lines are pixels in one canvas, not SVG paths or editable chart series. There is no audio input or waveform analysis.

### What happens without WebGPU?

This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component.

### Can I use this shader commercially?

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## License

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## Related shaders

- [Dot Grid](https://www.aperveil.com/shaders/dot-grid)
- [Silk Bands](https://www.aperveil.com/shaders/silk-bands)
- [Topo Lines](https://www.aperveil.com/shaders/topo-lines)