Skip to main content
The Neuro Noise shader creates a glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals inspired by neural networks and biological systems.

​
Usage

import { NeuroNoise } from '@paper-design/shaders-react';

function App() {
  return (
    <NeuroNoise
      colorFront="#ffffff"
      colorMid="#47a6ff"
      colorBack="#000000"
      brightness={0.05}
      contrast={0.3}
      speed={1}
    />
  );
}

​
Parameters

​
colorFront
string
default:"'#ffffff'"
Graphics highlight color in hex format. Used for the brightest intersection points of the neural web.
​
colorMid
string
default:"'#47a6ff'"
Graphics main color in hex format. The primary color of the neural web structure.
​
colorBack
string
default:"'#000000'"
Background color in hex format. Visible in the dark areas between the neural lines.
​
brightness
number
default:"0.05"
Luminosity of the crossing points (0 to 1). Higher values make the intersections glow brighter.
​
contrast
number
default:"0.3"
Sharpness of the bright-dark transition (0 to 1). Higher values create more defined, sharper lines.
​
speed
number
default:"1"
Animation speed multiplier. Controls how fast the neural pattern flows.

​
Common Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'cover'"
How to fit the shader into the canvas dimensions.
​
scale
number
default:"1"
Overall zoom level (0.01 to 4). Affects the density of the neural pattern.
​
rotation
number
default:"0"
Rotation angle in degrees (0 to 360).
​
offsetX
number
default:"0"
Horizontal offset (-1 to 1).
​
offsetY
number
default:"0"
Vertical offset (-1 to 1).

​
Presets

​
Default

<NeuroNoise
  colorFront="#ffffff"
  colorMid="#47a6ff"
  colorBack="#000000"
  brightness={0.05}
  contrast={0.3}
  speed={1}
/>

​
Sensation

<NeuroNoise
  colorFront="#00c8ff"
  colorMid="#fbff00"
  colorBack="#8b42ff"
  brightness={0.19}
  contrast={0.12}
  scale={3}
  speed={1}
/>

​
Bloodstream

<NeuroNoise
  colorFront="#ff0000"
  colorMid="#ff0000"
  colorBack="#ffffff"
  brightness={0.24}
  contrast={0.17}
  scale={0.7}
  speed={1}
/>

​
Ghost

<NeuroNoise
  colorFront="#ffffff"
  colorMid="#000000"
  colorBack="#ffffff"
  brightness={0.0}
  contrast={1.0}
  scale={0.55}
  speed={1}
/>

​
Technical Details

  • Algorithm: Iterative sine/cosine accumulation with rotation
  • Iterations: 15 layers for complex web structure
  • Coordinates: Uses pattern UV coordinates scaled by 0.13
  • Color Blending: Premultiplied alpha with highlight mixing
  • Performance: Optimized for real-time animation
  • Original Algorithm: Based on zozuar’s shader
The shader creates the neural web by accumulating rotated sine and cosine waves across 15 iterations, each with increasing scale. The result is squared and raised to a power based on contrast, then colors are mixed based on intensity thresholds.