diff --git a/scripts/system/controllers/controllerModules/teleport.js b/scripts/system/controllers/controllerModules/teleport.js
index 6d08a9d51c..c42956bb41 100644
--- a/scripts/system/controllers/controllerModules/teleport.js
+++ b/scripts/system/controllers/controllerModules/teleport.js
@@ -223,6 +223,13 @@ Script.include("/~/system/libraries/controllers.js");
         this.isPlayAreaAvailable = false;
         this.targetOverlayID = null;
 
+        this.PLAY_AREA_FADE_DELAY = 500;
+        this.PLAY_AREA_FADE_DURATION = 200;
+        this.PLAY_AREA_FADE_INTERVAL = 25;
+        this.PLAY_AREA_BOX_ALPHA = 1.0;
+        this.PLAY_AREA_SENSOR_ALPHA = 0.8;
+        this.PLAY_AREA_FADE_DELTA = this.PLAY_AREA_FADE_INTERVAL / this.PLAY_AREA_FADE_DURATION;
+
         this.TELEPORT_SCALE_DURATION = 500;
         this.TELEPORT_SCALE_TIMEOUT = 20;
         this.isTeleportVisible = false;
@@ -297,7 +304,31 @@ Script.include("/~/system/libraries/controllers.js");
             }
         };
 
-        this.setPlayAreaVisible = function (visible, targetOverlayID) {
+        this.playAreaFadeTimer = null;
+        this.PlayAreaFadeFactor = 1.0;
+
+        this.fadePlayArea = function () {
+            var i, length;
+            _this.PlayAreaFadeFactor = _this.PlayAreaFadeFactor - _this.PLAY_AREA_FADE_DELTA;
+            if (_this.PlayAreaFadeFactor > 0) {
+                // Fade.
+                Overlays.editOverlay(_this.playAreaOverlay, { alpha: _this.PlayAreaFadeFactor * _this.PLAY_AREA_BOX_ALPHA });
+                var sensorAlpha = _this.PlayAreaFadeFactor * _this.PLAY_AREA_SENSOR_ALPHA;
+                for (i = 0, length = _this.playAreaSensorPositionOverlays.length; i < length; i++) {
+                    Overlays.editOverlay(_this.playAreaSensorPositionOverlays[i], { alpha: sensorAlpha });
+                }
+                _this.playAreaFadeTimer = Script.setTimeout(_this.fadePlayArea, _this.PLAY_AREA_FADE_INTERVAL);
+            } else {
+                // Make invisible.
+                Overlays.editOverlay(_this.playAreaOverlay, { visible: false });
+                for (i = 0, length = _this.playAreaSensorPositionOverlays.length; i < length; i++) {
+                    Overlays.editOverlay(_this.playAreaSensorPositionOverlays[i], { visible: false });
+                }
+                _this.playAreaFadeTimer = null;
+            }
+        };
+
+        this.setPlayAreaVisible = function (visible, targetOverlayID, noFade) {
             if (!this.isPlayAreaAvailable || this.isPlayAreaVisible === visible) {
                 return;
             }
@@ -305,15 +336,29 @@ Script.include("/~/system/libraries/controllers.js");
             this.isPlayAreaVisible = visible;
             this.targetOverlayID = targetOverlayID;
 
-            Overlays.editOverlay(this.playAreaOverlay, {
-                dimensions: Vec3.ZERO,
-                visible: visible
-            });
-            for (var i = 0; i < this.playAreaSensorPositionOverlays.length; i++) {
-                Overlays.editOverlay(this.playAreaSensorPositionOverlays[i], {
-                    visible: visible,
-                    dimensions: Vec3.ZERO
+            if (this.playAreaFadeTimer !== null) {
+                Script.clearTimeout(this.playAreaFadeTimer);
+                this.playAreaFadeTimer = null;
+            }
+            if (visible || noFade) {
+                // Immediately make visible or invisible.
+                this.isPlayAreaVisible = visible;
+                Overlays.editOverlay(this.playAreaOverlay, {
+                    dimensions: Vec3.ZERO,
+                    alpha: this.PLAY_AREA_BOX_ALPHA,
+                    visible: visible
                 });
+                for (var i = 0; i < this.playAreaSensorPositionOverlays.length; i++) {
+                    Overlays.editOverlay(this.playAreaSensorPositionOverlays[i], {
+                        dimensions: Vec3.ZERO,
+                        alpha: this.PLAY_AREA_SENSOR_ALPHA,
+                        visible: visible
+                    });
+                }
+            } else {
+                // Fade out over time.
+                this.PlayAreaFadeFactor = 1.0;
+                _this.playAreaFadeTimer = Script.setTimeout(this.fadePlayArea, this.PLAY_AREA_FADE_DELAY);
             }
         };
 
@@ -571,7 +616,7 @@ Script.include("/~/system/libraries/controllers.js");
                 Pointers.setRenderState(_this.teleportParabolaHandInvisible, invisibleState);
                 pointerID = _this.teleportParabolaHandVisible;
             }
-            this.setPlayAreaVisible(visible, Pointers.getEndOverlayID(pointerID, "teleport"));
+            this.setPlayAreaVisible(visible, Pointers.getEndOverlayID(pointerID, "teleport"), true);
             this.setTeleportVisible(visible);
         };