react-background-noise
TypeScript icon, indicating that this package has built-in type declarations

0.1.6 • Public • Published

React Background Noise

Simple component that renders a Perlin Noise Classical pattern as a background WebGL pattern. The render uses WebGL shader from Stefan Gustavson

See demo here.

The below gif is limited by GIF compression artifacts and framerate, see the mp4 for a better view. Here's an example of different zoom sizes:

screen-grab

And an example of adjusting the vertical offset:

screen-grab

Installation

npm install react-background-noise

Usage

import Background from "react-background-noise"
 
<Background gridSize={32}>
  <div style={{color:"white"}}>Hello World</div>
</Background>

Additional Properties

Property Description
gridSize The size of the grid for the turbelence pattern. Defaults to 16
contrast {r:number,g:number,b:number} - each color constituent has a value 0-255. Used to reduce the contrast of the pattern. Defaults to {r:16,g:16,b:16}.
brightness {r:number,g:number,b:number} - each color constituent has a value 0-255. Used to make the pattern lighter. Defaults to {r:24,g:25,b:24}
scale Fraction as percent (0-1) of the inverse scale pattern. Use the test tool as a guide - 50% is 0.5.
offset {x:number,y:number} offset into the pattern. Defaults to 0,0.

Dependents (0)

Package Sidebar

Install

npm i react-background-noise

Weekly Downloads

15

Version

0.1.6

License

MIT

Last publish

Collaborators

  • joewood