If you haven't seen regl, go check out the website: . It's a really nice library for stateless WebGL programming, created by . Because of the statelessness, regl commands are naturally parameterized, making it straightforward to include WebGL sketches inline with your text in Idyll.

For example, with a minor modification to regl's I can embed it in an Idyll document. With just a couple of lines, I can add a dynamic variable to change the size of the particles,

Particle size:

and let a reader change the angle of rotation of this .

θ =

To help with this, I've abstracted out a component that uses to multiplex a single regl instance over the entire page. To create a custom regl component, create a class that extends from idyll-regl-component and implements the initialize() function:

The idyll-regl-component handles taking control of the DOM from react, and instantiating the multiplexer. This can be combined with many of Idyll's built-in components to quickly add interactivity. See this component on github: .

For example, you could implement a play/pause button.

(Click me!)

And add a way to scrub through time:

In this case, the particle code was updated to take a parameter that will pause its internal frame count, and a parameter to add an offset to that count.

Read more about Idyll at , or .