DEV Community

Wong Lok
Wong Lok

Posted on

Turning my WebGL webapp into a npm library


My app is called It's a flow based creative coding platform for developers and designers to work together :)

To share the technology with the whole world, i would like to turn it into a front end only library so that all developers can play with what I made.

Effect Node


npm i enos --save
Enter fullscreen mode Exit fullscreen mode


Live Demo with Effect Node Build with WebPack

Live Demo wihtout Effect Node

Live Demo with Effect Node

EffectNode Library

How does it work?

To organise code, we uses modules, just like the idea of es6.

With creative coding, we often needs designer input like coloring, sizing, animation seed, effect amount and timeline and so.

Each module can host its own value sliders, color picker and timeline.

The reason I adopt flow based coding is that it can pass animation data in a visual way and also provide a rapid way to compose effect or mix and match value in desing wise.


There are two modules in the demo picture above.

  1. Main Loop Module
  2. Dom Updater

The mainloop module runs a requestAnimationFrame loop and emit render events to a message bus (a vuejs instance)

The Dom Updater modules receive the render event from the message bus and then animate the CSS background linear-gradient of the root DOM of the project.

Top comments (0)