Readme

This is an experimental custom React Renderer, designed to compose Fragment Shaders using a declarative way.

Warning

🚧 Library is under active development and can be unstable.

Tip

Spot something odd? Let us know by creating an issue!

Got cool ideas or fixes? We'd love to see your pull requests. Join us in shaping this library! Happy creating and thanks for being part of our journey!

Why?

For fun, of course!

React Shader Fiber is designed to make shader programming easier and more fun. It combines the straightforward methods of modern frontend frameworks like React with shader programming. This makes advanced visual effects and graphics available to more developers.

See Documentation and examples

Installation

npm i @react-shader/fiber

Or with yarn:

yarn add @react-shader/fiber

Usage

Simple Hello World Shader

import {Color, Player, Shader} from "@react-shader/fiber";

const HelloWorld = () => {
  return (
      // You can specify size of your canvas
      <Player width={300} height={300}>
          <Shader>
              {/* Child of Shader component (color) will be assigned to the result */}
              <Color hex={"#ff0000"}/>
          </Shader>
      </Player>
  );
};

export default HelloWorld;

Features

• WebGL support
• Provide components as a props
• Built-in functions and expressions
• Call custom functions
• WebGPU support