Neuro Noise

Installation

npm i @paper-design/shaders-react

Code

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

<NeuroNoise
  style={{ height: 500 }}
  colorFront="#ffffff"
  colorMid="#47a6ff"
  colorBack="#000000"
  brightness={0.05}
  contrast={0.3}
  scale={1}
  rotation={0}
  speed={1}
/>

Props

NameDescriptionTypeValues
colorBackBackground colorstringHex, RGB, or HSL color
colorMidGraphics main colorstringHex, RGB, or HSL color
colorFrontGraphics highlight colorstringHex, RGB, or HSL color
brightnessLuminosity of the crossing pointsnumber0 to 1
contrastSharpness of the bright–dark transitionnumber0 to 1
scaleOverall zoom level of the graphicsnumber0.01 to 4
rotationOverall rotation angle of the graphicsnumber0 to 360
speedAnimation speednumber0 to 2

Description

A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals