diff --git a/src/components/beams.js b/src/components/beams.js
index f391af4..316e561 100644
--- a/src/components/beams.js
+++ b/src/components/beams.js
@@ -7,27 +7,9 @@ AFRAME.registerComponent('beams', {
   },
 
   init: function () {
+    this.beams = [];
     this.currentRed = 0;
     this.currentBlue = 0;
-
-    // Material.
-    const materialOptions = {
-      color: 0xaa3333,
-      map: new THREE.TextureLoader().load('assets/img/beam.png'),
-      transparent: false,
-      blending: THREE.AdditiveBlending
-    };
-    const redMaterial = new THREE.MeshBasicMaterial(materialOptions);
-    materialOptions.color = 0x4444cc;
-    const blueMaterial = new THREE.MeshBasicMaterial(materialOptions);
-    this.texture = materialOptions.map;
-
-    // Beam pools.
-    const geometry = new THREE.PlaneBufferGeometry(0.4, 50).translate(0, 25, 0);
-    this.beams = [];
-    this.redBeams = this.createBeamPool(geometry, redMaterial);
-    this.blueBeams = this.createBeamPool(geometry, blueMaterial);
-
     this.clearBeams = this.clearBeams.bind(this);
     this.el.sceneEl.addEventListener('cleargame', this.clearBeams);
   },
@@ -40,6 +22,25 @@ AFRAME.registerComponent('beams', {
     }
   },
 
+  play: function () {
+    // Material.
+    const materialOptions = {
+      color: 0xaa3333,
+      map: new THREE.TextureLoader().load('assets/img/beam.png'),
+      transparent: true,
+      blending: THREE.AdditiveBlending
+    };
+    const redMaterial = new THREE.MeshBasicMaterial(materialOptions);
+    materialOptions.color = 0x4444cc;
+    const blueMaterial = new THREE.MeshBasicMaterial(materialOptions);
+    this.texture = materialOptions.map;
+
+    // Beam pools.
+    const geometry = new THREE.PlaneBufferGeometry(0.4, 50).translate(0, 25, 0);
+    this.redBeams = this.createBeamPool(geometry, redMaterial);
+    this.blueBeams = this.createBeamPool(geometry, blueMaterial);
+  },
+
   /**
    * Use tick for manual ANIME animations, else it will create RAF.
    */
diff --git a/src/templates/stage.html b/src/templates/stage.html
index bafbb6f..42dc280 100644
--- a/src/templates/stage.html
+++ b/src/templates/stage.html
@@ -95,6 +95,8 @@
     <a-entity id="rightStageLaser2" mixin="stageLaser neonAnimation" position="14 -1.5 -36"></a-entity>
   </a-entity>
 
+  <a-entity id="beams" bind__beams="isPlaying: isPlaying"></a-entity>
+
   <a-mixin
     id="smoke"
     mixin="gameoverAnimation"
@@ -106,8 +108,6 @@
   <a-entity id="smoke1" mixin="smoke" geometry="radius: 10" position="0 1.4 0" animation__rotate="dur: 200000"></a-entity>
   <a-entity id="smoke2" mixin="smoke" geometry="radius: 20" position="0 1.8 0" animation__rotate="dur: 243000"></a-entity>
 
-  <a-entity id="beams" bind__beams="isPlaying: isPlaying"></a-entity>
-
   <a-entity light="type: directional; intensity: 3" position="0 10 10"></a-entity>
 
   <a-entity