Intro

React Shader Fiber

React Shader Fiber (RSF) is an experimental custom React Renderer, designed to compose Fragment Shaders using a declarative way.

🚧

Library is under active development and can be unstable.

💡

Spot something odd? Let us know by creating an issue (opens in a new tab)! Got cool ideas or fixes? We'd love to see your pull requests (opens in a new tab). 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.

Declarative Syntax

React's declarative syntax has revolutionized UI development, allowing developers to focus on what they want to achieve, rather than how to do it. This approach simplifies coding, enhancing readability and maintainability. React Shader Fiber extends these benefits to WebGL shaders, providing:

  • Improved Readability: The declarative nature makes shader code more understandable, even for those not deeply versed in WebGL.
  • Rapid Prototyping: Developers can quickly experiment with visual effects, seeing immediate results in a familiar framework.
  • Exploring: React Shader Fiber's exciting feature is exploring new animation combinations. You can blend animations for unique effects, promoting experimentation and creativity.