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.