A flexible React wrapper for creative coding libraries. Includes wrappers for Processing, Hydra, twgl.js, Regl, Elementary Audio, Web Audio, and more.
npm install reactive-framesReactive is a flexible React wrapper for creative coding libraries, enabling easy setup and interoperability between a diverse array of packages.
Currently, Reactive includes frames for the following libraries:
Visual
- Canvas (WebGL)
- Canvas (2D)
- SVG
- p5.js (Processing)
- Framer Motion
- twgl.js
- Regl
- SnapSVG
- Hydra
Audio
- Web Audio
- Elementary Audio
npm install reactive-frames .
// a generic component for creating/updating props // The p5.js library, in its own canvas
// a canvasGL instance that can adapt to window size
// A WebGL draw call using twgl.js
// A WebGL draw occupying the whole canvas
// A WebGL framebuffer
// A WebGL texture
// p5.js with a WebGL canvas you create
// a canvas2D instance that can adapt to window size
// p5.js with a 2D canvas you create
// a regl.js instance in its own canvas
// a Hydra instance in its own canvas
// a Snap.svg instance
// an audio Context (initialize with a button)
// Elementary audio
`Each component must be provided a
name, and then can call a setup and a draw function. Setup is executed on page load, while draw` is executed every frame.