Line Waves Free WebGPU shader

A rhythm you can interrupt.

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

Open editor Meet the surface

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.

A surface, not a screenshot.

FreeReact exportRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Line Waves.

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.

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

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.

Lines

Only the lines that can reach a pixel are evaluated, so this does not change cost much.

Amplitude

How high the lines wave.

Line width

In device pixels, so the field stays equally fine at any dpr.

Accent glow

How brightly the lines glow near the cursor.

Color Looks preserve these settings. Open the editor for all 12 controls.

KEEP THE SOURCE. KEEP THE CONTROL.

From preview to your project.

Choose a Look, tune it in the editor, then download the Export Kit. Install the runtime and copy the generated component into your project.

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.

In Next.js, use a client component and give its container an explicit size. Keep headings, links and accessible content in HTML above the decorative canvas.

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.

Open editor & export

Markdown guide

Usage example — download LineWaves.tsx from the editor first. This example imports that local file; it is not the shader component itself.

Terminal

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

LineWaves usage

"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; }

Download and extract the complete Export Kit first. Run its local package command from the ZIP root, then copy the component into your project. Public npm and CLI distribution is coming soon.

THE SURFACE IN CONTEXT

Made for a real interface.

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.