use-gradient-effector
v1.1.0
Published
Modify a matrix of values with an offscreen gradient
Downloads
6
Readme
use-gradient-effector
Modify a matrix of values with an offscreen gradient. Inspired by Cinema 4D's shader effector, which can trigger transformations depending on the shader's value at a coordinate.
Install
npm install --save use-gradient-effector
Usage
import React, { Component } from 'react'
import { useGradientEffector } from 'use-gradient-effector'
const Example = () => {
const shaderOutput = useGradientEffector({
dimensions, // Object with DOM element's dimensions: { width: number, height: number }
position, // Coordinate to center gradient, useful for mouse or element position
columns: 8, // Number of columns
rows: 6 // Number of rows
});
console.log(shaderOutput)
return (
<div>{example}</div>
)
}
Todo
- Add noise layer and multiplier
- Make use of other channels for layers
- Add linear/radial argument
License
MIT © zray
This hook is created using create-react-hook.