Run particles.js under Rails Turbolinks.

A Stimulus wrapper for Particles.js under Turbolinks.

The controller takes the Particles configuration from the containing div on the page. This allows us to pass parameters such as the webpack image_path from Rails to the Particles instance.

Under Turbolinks, navigating away from a Particles page and back without cleaning up the running Particles instance will result in multiple AnimationsFrames still running in the background, chewing up CPU. The Particles controller takes care of the configuration, the set up and the clean up.

Examples

Here is a zero config example. The particles default to white so you will need a non-white backgound color in order to see them.

<div id="particles-zero-config"
  style="background-color: #aaaaff;"
  data-controller="particles"
>
</div>

Here is an example of passing an image path from Rails to Particles.js. Note that you must set a unique div id or Particles.js will not find it. This example is running in the animated gif above.

<div id="particles-image-src"
  style="height: 150px; background-color: #aaaaff;"
  data-controller="particles"
  data-particles-config="<%= {
    particles: {
      shape: {
        type: 'image',
        image: {
          src: image_path('jg-logo-50x50.png')
        },
      },
      size: {
        value: 10,
        random: true,
      },
    },
  }.to_json %>"
>
</div>

Setup

Add rails-particles.js to package.json and register it with Stimulus.

yarn add rails-particles.js

// Stimulus setup.
import { Application } from 'stimulus'
const application = Application.start()

// Register the rails-particles.js controller.
import Particles from 'rails-particles.js'
application.register('particles', Particles)