React Fiber Waves Background

React fiber waves background with WebGL shaders. Features flowing wave lines, Perlin noise algorithms, and mouse interaction.

React

WebGL

OGL

Creating flowing visual effects?

Join our Discord community for help from other developers working with WebGL shaders and wave animations.

Ever wanted to recreate those mesmerizing fiber optic waves you see in data visualizations, audio reactive displays, or flowing abstract backgrounds? Those organic wave patterns that seem to pulse with life, creating depth and movement through mathematical precision? The way multiple lines flow in harmony, each following its own path yet contributing to a cohesive visual symphony? Most wave effects rely on simple CSS animations or basic particle systems, but they lack the sophisticated noise algorithms that create truly organic flowing patterns.

This React component creates that captivating fiber wave effect using WebGL shaders with OGL library, featuring Perlin noise-based wave generation, smooth mouse interaction, and mathematical line rendering that brings flowing energy to your interface.

Dynamic fiber optic waves with smooth interaction

Watch flowing wave lines pulse and respond with mathematical precision and cursor sensitivity:

Loading component...

// @ts-nocheck'use client';import React, { useEffect, useRef, forwardRef } from "react";// @ts-ignoreimport { Renderer, Program, Mesh, Triangle, Color } from "ogl";import { cn } from '@/lib/utils';export interface FiberWavesProps extends React.HTMLAttributes<HTMLDivElement> {  color?: [number, number, number];  amplitude?: number;  distance?: number;  enableMouseInteraction?: boolean;}const vertexShader = `attribute vec2 position;attribute vec2 uv;varying vec2 vUv;void main() {  vUv = uv;  gl_Position = vec4(position, 0.0, 1.0);}`;const fragmentShader = `precision highp float;uniform float iTime;uniform vec3 iResolution;uniform vec3 uColor;uniform float uAmplitude;uniform float uDistance;uniform vec2 uMouse;#define PI 3.1415926538const int u_line_count = 40;const float u_line_width = 7.0;const float u_line_blur = 10.0;float Perlin2D(vec2 P) {    vec2 Pi = floor(P);    vec4 Pf_Pfmin1 = P.xyxy - vec4(Pi, Pi + 1.0);    vec4 Pt = vec4(Pi.xy, Pi.xy + 1.0);    Pt = Pt - floor(Pt * (1.0 / 71.0)) * 71.0;    Pt += vec2(26.0, 161.0).xyxy;    Pt *= Pt;    Pt = Pt.xzxz * Pt.yyww;    vec4 hash_x = fract(Pt * (1.0 / 951.135664));    vec4 hash_y = fract(Pt * (1.0 / 642.949883));    vec4 grad_x = hash_x - 0.49999;    vec4 grad_y = hash_y - 0.49999;    vec4 grad_results = inversesqrt(grad_x * grad_x + grad_y * grad_y)        * (grad_x * Pf_Pfmin1.xzxz + grad_y * Pf_Pfmin1.yyww);    grad_results *= 1.4142135623730950;    vec2 blend = Pf_Pfmin1.xy * Pf_Pfmin1.xy * Pf_Pfmin1.xy               * (Pf_Pfmin1.xy * (Pf_Pfmin1.xy * 6.0 - 15.0) + 10.0);    vec4 blend2 = vec4(blend, vec2(1.0 - blend));    return dot(grad_results, blend2.zxzx * blend2.wwyy);}float pixel(float count, vec2 resolution) {    return (1.0 / max(resolution.x, resolution.y)) * count;}float lineFn(vec2 st, float width, float perc, float offset, vec2 mouse, float time, float amplitude, float distance) {    float split_offset = (perc * 0.4);    float split_point = 0.1 + split_offset;    float amplitude_normal = smoothstep(split_point, 0.7, st.x);    float amplitude_strength = 0.5;    float finalAmplitude = amplitude_normal * amplitude_strength                           * amplitude * (1.0 + (mouse.y - 0.5) * 0.2);    float time_scaled = time / 10.0 + (mouse.x - 0.5) * 1.0;    float blur = smoothstep(split_point, split_point + 0.05, st.x) * perc;    float xnoise = mix(        Perlin2D(vec2(time_scaled, st.x + perc) * 2.5),        Perlin2D(vec2(time_scaled, st.x + time_scaled) * 3.5) / 1.5,        st.x * 0.3    );    float y = 0.5 + (perc - 0.5) * distance + xnoise / 2.0 * finalAmplitude;    float line_start = smoothstep(        y + (width / 2.0) + (u_line_blur * pixel(1.0, iResolution.xy) * blur),        y,        st.y    );    float line_end = smoothstep(        y,        y - (width / 2.0) - (u_line_blur * pixel(1.0, iResolution.xy) * blur),        st.y    );    return clamp(        (line_start - line_end) * (1.0 - smoothstep(0.0, 1.0, pow(perc, 0.3))),        0.0,        1.0    );}void mainImage(out vec4 fragColor, in vec2 fragCoord) {    vec2 uv = fragCoord / iResolution.xy;    float line_strength = 1.0;    for (int i = 0; i < u_line_count; i++) {        float p = float(i) / float(u_line_count);        line_strength *= (1.0 - lineFn(            uv,            u_line_width * pixel(1.0, iResolution.xy) * (1.0 - p),            p,            (PI * 1.0) * p,            uMouse,            iTime,            uAmplitude,            uDistance        ));    }    float colorVal = 1.0 - line_strength;    fragColor = vec4(uColor * colorVal, colorVal);}void main() {    mainImage(gl_FragColor, gl_FragCoord.xy);}`;export const FiberWaves = forwardRef<HTMLDivElement, FiberWavesProps>(({  className,  color = [1, 1, 1],  amplitude = 1,  distance = 0,  enableMouseInteraction = false,  ...props}, ref) => {  const domProps = { ...props };  delete domProps.color;  delete domProps.amplitude;  delete domProps.distance;  delete domProps.enableMouseInteraction;  const containerRef = useRef<HTMLDivElement>(null);  const animationFrameId = useRef<number>();  useEffect(() => {    if (!containerRef.current) return;    const container = containerRef.current;    const renderer = new Renderer({ alpha: true });    const gl = renderer.gl;    gl.clearColor(0, 0, 0, 0);    gl.enable(gl.BLEND);    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);    container.appendChild(gl.canvas);    const geometry = new Triangle(gl);    const program = new Program(gl, {      vertex: vertexShader,      fragment: fragmentShader,      uniforms: {        iTime: { value: 0 },        iResolution: {          value: new Color(            gl.canvas.width,            gl.canvas.height,            gl.canvas.width / gl.canvas.height          ),        },        uColor: { value: new Color(...color) },        uAmplitude: { value: amplitude },        uDistance: { value: distance },        uMouse: { value: new Float32Array([0.5, 0.5]) },      },    });    const mesh = new Mesh(gl, { geometry, program });    function resize() {      const { clientWidth, clientHeight } = container;      renderer.setSize(clientWidth, clientHeight);      program.uniforms.iResolution.value.r = clientWidth;      program.uniforms.iResolution.value.g = clientHeight;      program.uniforms.iResolution.value.b = clientWidth / clientHeight;    }    window.addEventListener("resize", resize);    resize();    let currentMouse = [0.5, 0.5];    let targetMouse = [0.5, 0.5];    function handleMouseMove(e: MouseEvent) {      const rect = container.getBoundingClientRect();      const x = (e.clientX - rect.left) / rect.width;      const y = 1.0 - (e.clientY - rect.top) / rect.height;      targetMouse = [x, y];    }    function handleMouseLeave() {      targetMouse = [0.5, 0.5];    }    if (enableMouseInteraction) {      container.addEventListener("mousemove", handleMouseMove);      container.addEventListener("mouseleave", handleMouseLeave);    }    function update(t: number) {      if (enableMouseInteraction) {        const smoothing = 0.05;        currentMouse[0] += smoothing * (targetMouse[0] - currentMouse[0]);        currentMouse[1] += smoothing * (targetMouse[1] - currentMouse[1]);        program.uniforms.uMouse.value[0] = currentMouse[0];        program.uniforms.uMouse.value[1] = currentMouse[1];      } else {        program.uniforms.uMouse.value[0] = 0.5;        program.uniforms.uMouse.value[1] = 0.5;      }      program.uniforms.iTime.value = t * 0.001;      renderer.render({ scene: mesh });      animationFrameId.current = requestAnimationFrame(update);    }    animationFrameId.current = requestAnimationFrame(update);    return () => {      if (animationFrameId.current)        cancelAnimationFrame(animationFrameId.current);      window.removeEventListener("resize", resize);      if (enableMouseInteraction) {        container.removeEventListener("mousemove", handleMouseMove);        container.removeEventListener("mouseleave", handleMouseLeave);      }      if (container.contains(gl.canvas)) container.removeChild(gl.canvas);      gl.getExtension("WEBGL_lose_context")?.loseContext();    };  }, [color, amplitude, distance, enableMouseInteraction]);  return (    <div      ref={ref}      className={cn("w-full h-full", className)}      {...domProps}    >      <div ref={containerRef} className="w-full h-full relative" />    </div>  );});FiberWaves.displayName = 'FiberWaves';export default FiberWaves;

Built for React applications with TypeScript and optimized WebGL rendering. Uses advanced GLSL shaders with Perlin noise algorithms for authentic organic wave generation while providing intuitive controls for amplitude, spacing, and color intensity. Perfect for data visualization interfaces, audio-reactive applications, or any project needing that flowing fiber optic aesthetic.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/fiber-waves.json

npx shadcn@latest add https://www.shadcn.io/registry/fiber-waves.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/fiber-waves.json

bunx shadcn@latest add https://www.shadcn.io/registry/fiber-waves.json

Why simple CSS animations feel artificial

Developers create wave effects with CSS keyframes and consider them organic. Maybe they add some basic transform animations or linear wave functions. The problem? Simple CSS animations can't capture the complex, noise-based nature of true fiber optic flow that emerges from mathematical noise functions and shader-based rendering.

Shader-based fiber waves with WebGL changes everything. It taps into the fundamental mathematics of Perlin noise—the way random gradients create organic patterns, how mathematical functions generate smooth wave flows, the hypnotic beauty that emerges from layered line rendering. The algorithms use real Perlin noise calculations and distance field mathematics to create authentic flowing effects.

This component handles complex shader mathematics automatically. Perlin noise generation, smooth line rendering, mouse coordinate transformation, and wave amplitude calculations all work together seamlessly. The result feels like watching actual fiber optic data streams through your screen.

Features

WebGL shader rendering with advanced GLSL for real-time wave line generation
Perlin noise algorithms using mathematical gradient functions for organic wave patterns
Dynamic line system with 40+ flowing lines at different depths and amplitudes
Mouse-responsive interaction with smooth coordinate tracking and wave modulation
Mathematical wave functions using smoothstep and distance field calculations
Configurable wave properties with precise control over amplitude, distance, and color
Performance optimization with WebGL context management and efficient rendering
Responsive design with automatic canvas scaling and device pixel ratio handling
Memory management with proper WebGL context disposal and resource cleanup
Alpha blending support for seamless integration with various backgrounds

API Reference

FiberWaves

Prop	Type	Default	Description
`color`	`[number, number, number]`	`[1, 1, 1]`	RGB color values (0-1 range)
`amplitude`	`number`	`1`	Wave amplitude multiplier
`distance`	`number`	`0`	Wave line vertical separation
`enableMouseInteraction`	`boolean`	`false`	Enable mouse-responsive effects
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

Color Configurations

Different color schemes for various visual themes:

Theme	Color Values	Effect
White	`[1, 1, 1]`	Pure white fiber lines
Cyan	`[0, 1, 1]`	Electric blue-cyan glow
Magenta	`[1, 0, 1]`	Purple-pink energy lines
Purple	`[0.8, 0.4, 1]`	Soft purple gradient
Orange	`[1, 0.5, 0]`	Warm orange fiber glow

Wave Settings

Different amplitude and distance combinations for various effects:

Effect	Amplitude	Distance	Description
Subtle	0.5	0	Gentle, minimal wave motion
Standard	1.0	0	Balanced wave animation
Dynamic	1.5	0.2	Active, separated lines
Intense	2.0	0.5	Strong, dramatic waves

Shader mathematics

Perlin Noise Generation: Implements mathematical Perlin noise using gradient vectors and smooth interpolation functions to create organic, non-repeating wave patterns.

Distance Field Rendering: Uses smoothstep functions and distance calculations to create smooth line edges with anti-aliasing and blur effects for professional visual quality.

Wave Function Composition: Combines multiple noise octaves with time-based phase shifting to create complex, layered wave patterns that feel natural and organic.

Mouse Integration: Transforms screen coordinates to normalized UV space with smooth interpolation for consistent interaction across different container sizes.

Performance considerations

WebGL Optimization: Uses efficient GLSL shader compilation with optimized uniform updates and minimal state changes for consistent 60fps performance.

Fragment Shader Efficiency: Implements mathematical optimizations including loop unrolling and function inlining to reduce GPU computation overhead for real-time rendering.

Memory Management: Properly handles WebGL context creation, canvas management, and resource disposal to prevent memory leaks and context loss.

Responsive Scaling: Uses device pixel ratio awareness with efficient canvas resizing to maintain crisp visuals across different screen densities.

Common gotchas

WebGL Context: Component requires WebGL-enabled browser. Gracefully handles context creation failures but won't render without WebGL support.

Color Range: Color values should be in 0-1 range (not 0-255). Values outside this range may cause unexpected shader behavior or color clamping.

Performance Impact: Continuous shader execution can impact battery life on mobile devices. Consider pausing animation when component is not visible.

Container Sizing: Component fills its container completely. Ensure parent element has defined dimensions for proper wave pattern rendering.

Mouse Coordinates: Uses normalized UV coordinates for consistent behavior across different container sizes and device pixel ratios.

Amplitude Limits: Very high amplitude values (>5) may cause visual artifacts or clipping. Keep amplitude values reasonable for smooth wave animation.

React Fiber Waves Background

Dynamic fiber optic waves with smooth interaction

Installation

Why simple CSS animations feel artificial

Features

API Reference

FiberWaves

Color Configurations

Wave Settings

Shader mathematics

Performance considerations

Common gotchas

You might also like

Waves Background

Liquid Chrome Background

Aurora Background

Plasma Background

Questions developers actually ask

On this page

React Fiber Waves Background