diff --git a/src/hub.html b/src/hub.html
index 86396dd70ca446366276624ecb6fcf4f9a3194ca..aa789e35590d5c175374e84e0f0026aea136f797 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -21,7 +21,7 @@
         networked-scene="adapter: janus; audio: true; debug: true; connectOnLoad: false;"
         physics
         mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
-        personal-space-bubble="debug: false;"
+        personal-space-bubble="debug: true;"
 
         app-mode-input-mappings="modes: default, hud; actionSets: default, hud;"
         >
@@ -116,7 +116,7 @@
 
                     <a-entity class="model" gltf-model-plus="inflate: true">
                         <template data-selector=".RootScene">
-                            <a-entity ik-controller animation-mixer></a-entity>
+                            <a-entity ik-controller animation-mixer space-invader-mesh="meshSelector: .Bot_Skinned"></a-entity>
                         </template>
 
                         <template data-selector=".Neck">
@@ -132,14 +132,14 @@
                         </template>
 
                         <template data-selector=".Chest">
-                            <a-entity personal-space-invader="radius: 0.2" bone-visibility></a-entity>
+                            <a-entity personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility></a-entity>
                         </template>
 
                         <template data-selector=".Head">
                             <a-entity
                                 networked-audio-source
                                 networked-audio-analyser
-                                personal-space-invader="radius: 0.15"
+                                personal-space-invader="radius: 0.15; useMaterial: true;"
                                 bone-visibility
                             >
                             </a-entity>
diff --git a/src/systems/personal-space-bubble.js b/src/systems/personal-space-bubble.js
index 1077e7af66785f5944adbbaf2cb5e3bbd1b73732..266e050353f979a6eb22f0e8190820470190ce4d 100644
--- a/src/systems/personal-space-bubble.js
+++ b/src/systems/personal-space-bubble.js
@@ -23,18 +23,18 @@ AFRAME.registerSystem("personal-space-bubble", {
     }
   },
 
-  registerInvader(el) {
-    NAF.utils.getNetworkedEntity(el).then(networkedEl => {
+  registerInvader(invader) {
+    NAF.utils.getNetworkedEntity(invader.el).then(networkedEl => {
       const owner = NAF.utils.getNetworkOwner(networkedEl);
 
       if (owner !== NAF.clientId) {
-        this.invaders.push(el);
+        this.invaders.push(invader);
       }
     });
   },
 
-  unregisterInvader(el) {
-    const index = this.invaders.indexOf(el);
+  unregisterInvader(invader) {
+    const index = this.invaders.indexOf(invader);
 
     if (index !== -1) {
       this.invaders.splice(index, 1);
@@ -48,7 +48,8 @@ AFRAME.registerSystem("personal-space-bubble", {
     }
 
     for (let i = 0; i < this.invaders.length; i++) {
-      this.invaders[i].object3D.updateMatrixWorld(true);
+      this.invaders[i].el.object3D.updateMatrixWorld(true);
+      this.invaders[i].setVisibility(true);
     }
 
     // Loop through all of the space bubbles (usually one)
@@ -62,14 +63,14 @@ AFRAME.registerSystem("personal-space-bubble", {
       // Hide the invader if inside the bubble
       for (let j = 0; j < this.invaders.length; j++) {
         const invader = this.invaders[j];
-        const invaderRaidus = invader.components["personal-space-invader"].data.radius;
 
-        invaderPos.setFromMatrixPosition(invader.object3D.matrixWorld);
+        invaderPos.setFromMatrixPosition(invader.el.object3D.matrixWorld);
 
         const distanceSquared = bubblePos.distanceToSquared(invaderPos);
-        const radius = bubbleRadius + invaderRaidus;
-
-        invader.object3D.visible = distanceSquared > radius * radius;
+        const radius = bubbleRadius + invader.data.radius;
+        if (distanceSquared < radius * radius) {
+          invader.setVisibility(false);
+        }
       }
     }
   }
@@ -84,17 +85,43 @@ function createSphereGizmo(radius) {
   return line;
 }
 
+// TODO: we need to come up with a more generic way of doing this as this is very specific to our avatars.
+AFRAME.registerComponent("space-invader-mesh", {
+  schema: {
+    meshSelector: { type: "string" }
+  },
+  init() {
+    this.targetMesh = this.el.querySelector(this.data.meshSelector).object3DMap.skinnedmesh;
+    console.log("target", this.targetMesh);
+  }
+});
+
+function findInvderMesh(entity) {
+  while (entity && !(entity.components && entity.components["space-invader-mesh"])) {
+    entity = entity.parentNode;
+  }
+  return entity && entity.components["space-invader-mesh"].targetMesh;
+}
+
 AFRAME.registerComponent("personal-space-invader", {
   schema: {
     radius: { type: "number", default: 0.1 },
+    useMaterial: { default: false },
     debug: { default: false }
   },
   init() {
     const system = this.el.sceneEl.systems["personal-space-bubble"];
-    system.registerInvader(this.el);
+    system.registerInvader(this);
     if (system.data.debug || this.data.debug) {
       this.el.object3D.add(createSphereGizmo(this.data.radius));
     }
+    if (this.data.useMaterial) {
+      const mesh = findInvderMesh(this.el);
+      if (mesh) {
+        this.targetMaterial = mesh.material;
+      }
+      console.log("invader mesh", this.targetMesh);
+    }
   },
 
   update() {
@@ -102,7 +129,16 @@ AFRAME.registerComponent("personal-space-invader", {
   },
 
   remove() {
-    this.el.sceneEl.systems["personal-space-bubble"].unregisterInvader(this.el);
+    this.el.sceneEl.systems["personal-space-bubble"].unregisterInvader(this);
+  },
+
+  setVisibility(visible) {
+    if (this.targetMaterial) {
+      this.targetMaterial.opacity = visible ? 1 : 0.3;
+      this.targetMaterial.transparent = !visible;
+    } else {
+      this.el.object3D.visible = visible;
+    }
   }
 });