diff --git a/playground/src/pages/staging/SkyDemo.vue b/playground/src/pages/staging/SkyDemo.vue
index 040bad1f..4da717e6 100644
--- a/playground/src/pages/staging/SkyDemo.vue
+++ b/playground/src/pages/staging/SkyDemo.vue
@@ -12,13 +12,14 @@ const gl = {
   toneMappingExposure: 1,
 }
 
-const [turbidity, rayleigh, mieCoefficient, mieDirectionalG, elevation, azimuth, exposure] = useControls({
+const [turbidity, rayleigh, mieCoefficient, mieDirectionalG, elevation, azimuth, distance, exposure] = useControls({
   turbidity: { value: 3.4, min: 0, max: 20, step: 0.1 },
   rayleigh: { value: 3, min: 0, max: 4, step: 0.1 },
   mieCoefficient: { value: 0.005, min: 0, max: 0.1, step: 0.001 },
   mieDirectionalG: { value: 0.7, min: 0, max: 0.99, step: 0.01 },
   elevation: { value: 2, min: 0, max: 90, step: 0.1 },
   azimuth: { value: 180, min: 0, max: 360, step: 1 },
+  distance: { value: 450000, min: 1000, max: 1000000, step: 1000 },
   exposure: { value: 0.5, min: 0, max: 1, step: 0.01 },
 })
 
@@ -38,6 +39,7 @@ const [turbidity, rayleigh, mieCoefficient, mieDirectionalG, elevation, azimuth,
       :mie-directional-g="mieDirectionalG.value.value"
       :rayleigh="rayleigh.value.value"
       :turbidity="turbidity.value.value"
+      :distance="distance.value.value"
     />
     <OrbitControls :zoom-speed="0" />
   </TresCanvas>