diff --git a/demo/collision.html b/demo/collision.html
index a93681d..df38925 100644
--- a/demo/collision.html
+++ b/demo/collision.html
@@ -25,21 +25,19 @@
     </style>
   </head>
   <body>
-    <fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
+    <fc-geometry x="100" y="100" width="50" height="50"> Hello World </fc-geometry>
     <fc-geometry x="200" y="200" width="50" height="50"></fc-geometry>
 
     <script type="module">
       import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
 
       FolkGeometry.register();
+
       const geometryElements = document.querySelectorAll('fc-geometry');
 
       function collisionDetection(rect1, rect2) {
         return (
-          rect1.left < rect2.right &&
-          rect1.right > rect2.left &&
-          rect1.top < rect2.bottom &&
-          rect1.bottom > rect2.top
+          rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
         );
       }
 
diff --git a/demo/music.html b/demo/music.html
index 2569ebc..1334c74 100644
--- a/demo/music.html
+++ b/demo/music.html
@@ -16,6 +16,8 @@
       }
 
       fc-geometry:has(record-player) {
+        box-shadow: 10px 0px 150px 0px rgba(0, 0, 0, 0.61);
+
         &::part(resize-nw),
         &::part(resize-ne),
         &::part(resize-se),
@@ -30,14 +32,9 @@
     </style>
   </head>
   <body>
-    <!-- 
-      sips -c 326 276 --cropOffset 1 1 *.png --out pngs/
-      ffmpeg -framerate 25 -pattern_type glob -i '*.png' -c:v prores -pix_fmt yuva444p10le dancing-flower.mov
-      ffmpeg -framerate 25 -f image2 -pattern_type glob -i '*.png' -c:v libvpx-vp9 -pix_fmt yuva420p dancing-flowers.webm
-    -->
     <fc-geometry x="100" y="75" width="330" height="198">
       <record-player>
-        <audio src="/Feather.mp3"></audio>
+        <audio src="/Feather.mov"></audio>
       </record-player>
     </fc-geometry>
 
@@ -69,11 +66,15 @@
       FolkGeometry.register();
       RecordPlayer.register();
 
-      let proximityDistance = 200;
+      /**
+        sips -c 326 276 --cropOffset 1 1 *.png --out pngs/
+        ffmpeg -framerate 25 -pattern_type glob -i '*.png' -c:v prores -pix_fmt yuva444p10le dancing-flower.mov
+        ffmpeg -framerate 25 -f image2 -pattern_type glob -i '*.png' -c:v libvpx-vp9 -pix_fmt yuva420p dancing-flowers.webm
+       */
+
+      let proximityDistance = 150;
       const proximitySet = new Set();
-      const recordPlayerGeometry = document.querySelector(
-        'fc-geometry:has(record-player)'
-      );
+      const recordPlayerGeometry = document.querySelector('fc-geometry:has(record-player)');
       const recordPlayer = recordPlayerGeometry.firstElementChild;
       const flowers = document.querySelectorAll('fc-geometry:has(video)');
       // set playback rate when video is ready
@@ -88,10 +89,7 @@
 
       function collisionDetection(rect1, rect2) {
         return (
-          rect1.left < rect2.right &&
-          rect1.right > rect2.left &&
-          rect1.top < rect2.bottom &&
-          rect1.bottom > rect2.top
+          rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
         );
       }
 
diff --git a/demo/public/Feather.mov b/demo/public/Feather.mov
new file mode 100644
index 0000000..6e44e47
Binary files /dev/null and b/demo/public/Feather.mov differ
diff --git a/src/spreadsheet/spreadsheet.ts b/src/spreadsheet/spreadsheet.ts
index 6d63835..795c7ac 100644
--- a/src/spreadsheet/spreadsheet.ts
+++ b/src/spreadsheet/spreadsheet.ts
@@ -5,7 +5,7 @@ styles.replaceSync(`
   --column-number: 10;
   --row-number: 10;
   --cell-height: 1.75rem;
-  --cell-width: 200px;
+  --cell-width: 100px;
   --border-color: #e1e1e1;
   border: solid 1px var(--border-color);
   box-sizing: border-box;
