Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including aframe-particle-system-component with all npm packages installed. Try it out:

var aframeParticleSystemComponent = require("aframe-particle-system-component")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

aframe-particle-system-component v1.1.3

Particle systems for A-Frame.


Particle system component for A-Frame.

Particle System



This component exposes only a subset of the ShaderParticleEngine API.

PropertyDescriptionDefault Value
presetPreset configuration. Possible values are: default, dust, snow, rain.default
maxAgeThe particle's maximum age in seconds.6
positionSpreadDescribes this emitter's position variance on a per-particle basis.0 0 0
typeThe default distribution this emitter should use to control its particle's spawn position and force behaviour. Possible values are 1 (box), 2 (sphere), 3 (disc)1 (box)
rotationAxisDescribes this emitter's axis of rotation. Possible values are x, y and z.x
rotationAngleThe angle of rotation, given in radians. Dust preset is 3.14.0
rotationAngleSpreadThe amount of variance in the angle of rotation per-particle, given in radians.0
accelerationValueDescribes this emitter's base acceleration.0, -10, 0
accelerationSpreadDescribes this emitter's acceleration variance on a per-particle basis.10 0 10
velocityValueDescribes this emitter's base velocity.0 25 0
velocitySpreadDescribes this emitter's acceleration variance on a per-particle basis.10 7.5 10
dragValueNumber between 0 and 1 describing drag applied to all particles.0
dragSpreadNumber describing drag variance on a per-particle basis.0
dragRandomiseWHen a particle is re-spawned, whether it's drag should be re-randomised or not. Can incur a performance hit.false
colorDescribes a particle's color. This property is a "value-over-lifetime" property, meaning an array of values can be given to describe specific value changes over a particle's lifetime.#0000FF,#FF0000
sizeDescribes a particle's size.1
directionThe direction of the emitter. If value is 1, emitter will start at beginning of particle's lifecycle. If value is -1, emitter will start at end of particle's lifecycle and work it's way backwards.1
durationThe duration in seconds that this emitter should live for. If not specified, the emitter will emit particles indefinitely.null
enabledWhen true the emitter will emit particles, when false it will not. This value can be changed dynamically during a scene. While particles are emitting, they will disappear immediately when set to false.true
particleCountThe total number of particles this emitter will hold. NOTE: this is not the number of particles emitted in a second, or anything like that. The number of particles emitted per-second is calculated by particleCount / maxAge (approximately!)1000
textureThe texture used by this emitter../images/star2.png
randomiseWhen a particle is re-spawned, whether it's position should be re-randomised or not. Can incur a performance hit.false
opacityEither a single number to describe the opacity of a particle.1
blendingThe blending mode of the particles. Possible values are 0 (no blending), 1 (normal), 2 (additive), 3 (subtractive), 4 (multiply)2


<a-entity position="0 2.25 -15" particle-system="preset: dust"></a-entity>
<a-entity position="0 2.25 -15" particle-system="preset: snow"></a-entity>
<a-entity position="0 2.25 -15" particle-system="preset: rain"></a-entity>
<a-entity position="0 2.25 -15" particle-system="preset: dust; texture: ./images/star2.png; color: #0000FF,#00FF00,#FF0000"></a-entity>

Browser Installation

Install and use by directly including the browser files.

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>A-Frame Particle System Component Example</title>
    <meta name="description" content="Hello, World!">
    <script src=""></script>
    <script src=""></script>
      <!-- Particle system uses 'default' preset, setting custom colors. -->
      <a-entity position="0 2.25 -15" particle-system="color: #EF0000,#44CC00"></a-entity>

      <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
      <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

      <a-sky color="#000000"></a-sky>


npm install aframe-particle-system-component

Local Development

npm install
npm run dev


Based on the ShaderParticleEngine by Squarefeet.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free