diff --git a/src/index.html b/src/index.html
index debf7a8..5cb0619 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,7 +17,7 @@
       mixin="gameoverAnimation fogAnimation"
       bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty; isPlaying: isPlaying"
       bind__gameover="isGameOver: isGameOver"
-      bind__intro-song="isPlaying: menu.active && !menuSelectedChallenge.id"
+      bind__intro-song="isPlaying: menuActive && !menuSelectedChallenge.id"
       bind__overlay="enabled: !isPlaying"
       bind__song="challengeId: challenge.id; isPlaying: isPlaying; isBeatsPreloaded: challenge.isBeatsPreloaded; isGameOver: isGameOver"
       bind__song-preview-system="challengeId: challenge.id; isSongLoading: isSongLoading; selectedChallengeId: menuSelectedChallenge.id"
@@ -176,7 +176,7 @@
             trail="color: {{ bladeColor }}; hand: {{ hand }}">
             <a-entity
               id="{{ hand }}Laser"
-              bind__visible="menu.active && activeHand === '{{ hand }}'"
+              bind__visible="menuActive && activeHand === '{{ hand }}'"
               cursor-laser="hand: {{ hand }}"
               sub-object="from: #cursorLaser; name: beam"
               material="color: {{ beamColor }}; shader: flat; transparent: true; opacity: 0.04"></a-entity>
@@ -235,7 +235,7 @@
         <a-entity id="mouseCursor" mixin="raycaster" cursor="rayOrigin: mouse"
                   bind__raycaster="enabled: !inVR" raycaster="showLine: false"></a-entity>
         <a-entity id="mouseCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #mouseCursor"
-                  bind__cursor-mesh="active: menu.active"></a-entity>
+                  bind__cursor-mesh="active: menuActive"></a-entity>
       {% endif %}
     </a-scene>
     <a id="vrButton" href="#" title="Enter VR / Fullscreen"></a>
diff --git a/src/state/index.js b/src/state/index.js
index 27e1342..1f46561 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -41,7 +41,7 @@ AFRAME.registerState({
     isSongLoading: false,  // Either fetching or decoding.
     isVictory: false,  // Victory screen.
     keyboardActive: false,  // Whether search is open.
-    menu: {active: true},
+    menuActive: true,
     menuDifficulties: [],
     menuSelectedChallenge: {
       author: '',
@@ -127,7 +127,7 @@ AFRAME.registerState({
       state.isGameOver = false;
       state.isPaused = false;
       state.isVictory = false;
-      state.menu.active = true;
+      state.menuActive = true;
       state.challenge.id = '';
     },
 
@@ -185,7 +185,7 @@ AFRAME.registerState({
       Object.assign(state.challenge, state.menuSelectedChallenge);
 
       // Reset menu.
-      state.menu.active = false;
+      state.menuActive = false;
       state.menuSelectedChallenge.id = '';
 
       state.keyboardActive = false;
@@ -261,10 +261,10 @@ AFRAME.registerState({
    */
   computeState: (state) => {
     state.isPlaying =
-      !state.menu.active && !state.isPaused && !state.isVictory && !state.isGameOver &&
+      !state.menuActive && !state.isPaused && !state.isVictory && !state.isGameOver &&
       !state.challenge.isLoading && !state.isSongLoading;
 
-    const anyMenuOpen = state.menu.active || state.isPaused || state.isVictory || state.isGameOver;
+    const anyMenuOpen = state.menuActive || state.isPaused || state.isVictory || state.isGameOver;
     state.leftRaycasterActive = anyMenuOpen && state.activeHand === 'left' && state.inVR;
     state.rightRaycasterActive = anyMenuOpen && state.activeHand === 'right' && state.inVR;
 
diff --git a/src/templates/menu.html b/src/templates/menu.html
index 5df9f1d..5587446 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -51,8 +51,8 @@
   <a-entity
     id="searchPrevPage"
     mixin="searchPageButton"
-    bind-toggle__raycastable="search.hasPrev && menu.active"
-    raycaster-target="bindToggle: search.hasNext && menu.active; position: 0 0.08 0"
+    bind-toggle__raycastable="search.hasPrev && menuActive"
+    raycaster-target="bindToggle: search.hasNext && menuActive; position: 0 0.08 0"
     position="-0 0.69 0.01"
     proxy-event="event: click; to: a-scene; as: searchprevpage; captureBubbles: true"
     bind__visible="search.hasPrev">
@@ -61,7 +61,7 @@
   <a-entity
     id="searchNextPage"
     mixin="searchPageButton"
-    raycaster-target="bindToggle: search.hasNext && menu.active; position: 0 -0.08 0"
+    raycaster-target="bindToggle: search.hasNext && menuActive; position: 0 -0.08 0"
     position="-0 -0.674 0.01"
     proxy-event="event: click; to: a-scene; as: searchnextpage; captureBubbles: true"
     bind__visible="search.hasNext">
@@ -84,7 +84,7 @@
         bind-item__animation__mouseentervisible="enabled: menuSelectedChallenge.id !== item.id"
         bind-item__animation__mouseleave="enabled: menuSelectedChallenge.id !== item.id"
         bind-item__animation__mouseleavevisible="enabled: menuSelectedChallenge.id !== item.id"
-        bind-toggle__raycastable="menu.active"
+        bind-toggle__raycastable="menuActive"
         geometry="primitive: plane; width: 1.1; height: 0.2"
         material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
         position="0 -0.13 -0.002"
@@ -100,7 +100,7 @@
 {% endraw %}
 
 <!-- Menu container begins here. -->
-<a-entity id="menu" bind__visible="menu.active" position="0 1.65 -2">
+<a-entity id="menu" bind__visible="menuActive" position="0 1.65 -2">
   <a-entity id="menuchallengeunselectground"
       mixin="slice"
       slice9="width: 2.5; height: 1.55"
@@ -146,7 +146,7 @@
               bind-item__animation__mouseleave="enabled: menuSelectedChallenge.difficulty !== item"
               bind-item__animation__mouseentervisible="enabled: menuSelectedChallenge.difficulty !== item"
               bind-item__animation__mouseleavevisible="enabled: menuSelectedChallenge.difficulty !== item"
-              bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== item"
+              bind-toggle__raycastable="menuActive && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== item"
               geometry="primitive: plane; width: 0.4; height: 0.2"
               material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
               position="0 -0.005 0"
@@ -195,8 +195,8 @@
              animation__mouseleave1="property: components.material.material.color; type: color; from: #FFF; to: #CCC; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
              animation__mouseenter2="property: scale; from: 1 1 1; to: 1.1 1.1 1.1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
              animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
-             bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id"
-             bind__visible="menu.active && !!menuSelectedChallenge.id"></a-plane>
+             bind-toggle__raycastable="menuActive && !!menuSelectedChallenge.id"
+             bind__visible="menuActive && !!menuSelectedChallenge.id"></a-plane>
   </a-entity>
 
 </a-entity>
@@ -207,8 +207,8 @@
   animation__mouseleave1="property: slice9.color; type: color; from: #FFF; to: #999; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
   animation__mouseenter2="property: scale; from: 1 1 1; to: 1.1 1.1 1.1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
   animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
-  bind-toggle__raycastable="menu.active && !keyboardActive"
-  bind__visible="menu.active && !keyboardActive"
+  bind-toggle__raycastable="menuActive && !keyboardActive"
+  bind__visible="menuActive && !keyboardActive"
   proxy-event="event: click; to: a-scene; as: keyboardopen">
   <a-entity mixin="textFont" text="align: center; color: #AAA; wrapCount: 20; value: SEARCH SONGS" position="0 -0.07 0.01"></a-entity>
 </a-entity>
diff --git a/src/templates/stage.html b/src/templates/stage.html
index 0006ace..b60716d 100644
--- a/src/templates/stage.html
+++ b/src/templates/stage.html
@@ -47,7 +47,7 @@
 
 <a-entity
   id="audioAnalyser"
-  bind__audioanalyser="beatDetectionThrottle: menu.active && 5000 || 1000"
+  bind__audioanalyser="beatDetectionThrottle: menuActive && 5000 || 1000"
   audioanalyser="src: #introSong; fftSize: 64; enableBeatDetection: true; enableLevels: false; enableWaveform: false; beatDetectionThrottle: 5000; unique: true"
   proxy-event="event: audioanalyserbeat; to: #logolight"></a-entity>
 
@@ -141,11 +141,11 @@
     logo-light
     animation__rotate="property: object3D.rotation.y; from: 50; to: -50; dur: 300; easing: linear; startEvents: audioanalyserbeat"></a-entity>
 
-  <a-entity id="logosparks" bind__visible="menu.active" particleplayer="src: #logoSparks; scale: 1.4; pscale: 0.35; count: 10; dur: 1000; on: logoflicker; animateScale: true; initialScale: 1.5 1.5 1.5; finalScale: 0.3 0.3 0.3" position="-2.8 5.5 -7.2"></a-entity>
-  <a-entity id="logo" bind__visible="menu.active" position="0 6 -7.5" rotation="90 0 0">
+  <a-entity id="logosparks" bind__visible="menuActive" particleplayer="src: #logoSparks; scale: 1.4; pscale: 0.35; count: 10; dur: 1000; on: logoflicker; animateScale: true; initialScale: 1.5 1.5 1.5; finalScale: 0.3 0.3 0.3" position="-2.8 5.5 -7.2"></a-entity>
+  <a-entity id="logo" bind__visible="menuActive" position="0 6 -7.5" rotation="90 0 0">
     <a-entity id="logoBack" obj-model="obj: #logobackObj" material="color: #001b29"></a-entity>
     <a-entity id="logoFront" obj-model="obj: #logofrontObj"  material="color: #e81e23"></a-entity>
-    <a-entity id="logoFrontU" obj-model="obj: #logofrontUObj" material="color: #e81e23" logoflicker="delay: 1200" bind__logoflicker="active: menu.active"></a-entity>
+    <a-entity id="logoFrontU" obj-model="obj: #logofrontUObj" material="color: #e81e23" logoflicker="delay: 1200" bind__logoflicker="active: menuActive"></a-entity>
   </a-entity>
 
   <a-entity