https://github.com/joewood/react-background-noise

Background component using generated noise using WebGL
https://github.com/joewood/react-background-noise

noise react webgl

Last synced: about 4 hours ago
JSON representation

Background component using generated noise using WebGL

• Host: GitHub
• URL: https://github.com/joewood/react-background-noise
• Owner: joewood
• License: mit
• Created: 2017-05-29T23:44:20.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T21:48:11.000Z (almost 2 years ago)
• Last Synced: 2024-04-15T02:04:55.411Z (7 months ago)
• Topics: noise, react, webgl
• Language: TypeScript
• Homepage:
• Size: 22.6 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf)

See [demo here](https://joewood.github.com/react-background-noise).

The below gif is limited by GIF compression artifacts and framerate, see the [mp4](https://github.com/joewood/react-background-noise/raw/master/docs/capture.mp4?raw=true) for a better view. Here's an example of different zoom sizes:

![screen-grab](https://github.com/joewood/react-background-noise/raw/master/docs/capture-zoom.gif?raw=true)

And an example of adjusting the vertical offset:

![screen-grab](https://github.com/joewood/react-background-noise/raw/master/docs/capture-vert.gif?raw=true)

## Installation

```

npm install react-background-noise

```

## Usage

```jsx

import Background from "react-background-noise"

  
Hello World


```

## 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.                                                                                        |