diff --git a/demo/distance-perf.html b/demo/distance-perf.html
new file mode 100644
index 0000000..c0c572d
--- /dev/null
+++ b/demo/distance-perf.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Distance Perf</title>
+    <style>
+      html {
+        height: 100%;
+      }
+
+      body {
+        min-height: 100%;
+        position: relative;
+        margin: 0;
+      }
+
+      fc-geometry {
+        border: 2px solid black;
+      }
+
+      distance-field {
+        position: absolute;
+        inset: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <distance-field> </distance-field>
+    <script type="module">
+      import { DistanceField } from '../src/distance-field.ts';
+      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+
+      FolkGeometry.define();
+
+      const d = document.querySelector('distance-field');
+
+      const geometries = [];
+
+      const now = performance.now();
+      for (let i = 0; i < 20; i++) {
+        for (let j = 0; j < 20; j++) {
+          const geo = document.createElement('fc-geometry');
+          geo.x = 50 * i + Math.floor(Math.random() * 45);
+          geo.y = 50 * j + Math.floor(Math.random() * 45);
+          geo.width = geo.height = 45;
+          geometries.push(geo);
+          d.append(geo);
+        }
+      }
+      console.log(performance.now() - now);
+
+      DistanceField.define();
+
+      // function tick() {
+      //   window.requestAnimationFrame(tick);
+
+      //   for (let i = 0; i < 10; i++) {
+      //     const g = geometries[Math.floor(Math.random() * geometries.length)];
+      //     const max = 15;
+      //     g.x += Math.floor(Math.random() * max - max / 2);
+      //     g.y += Math.floor(Math.random() * max - max / 2);
+      //   }
+      // }
+
+      // tick();
+    </script>
+  </body>
+</html>
diff --git a/src/distance-field.ts b/src/distance-field.ts
index 500792d..809ad59 100644
--- a/src/distance-field.ts
+++ b/src/distance-field.ts
@@ -1,5 +1,6 @@
 import { frag, vert } from './utils/tags.ts';
 import { WebGLUtils } from './utils/webgl.ts';
+import type { FolkGeometry } from './canvas/fc-geometry.ts';
 
 /**
  * The DistanceField class calculates a distance field using the Jump Flooding Algorithm (JFA) in WebGL.
@@ -11,7 +12,7 @@ export class DistanceField extends HTMLElement {
 
   private textures: WebGLTexture[] = [];
 
-  private shapes!: NodeListOf<Element>;
+  private shapes!: NodeListOf<FolkGeometry>;
   private canvas!: HTMLCanvasElement;
   private glContext!: WebGL2RenderingContext;
   private framebuffer!: WebGLFramebuffer;
@@ -154,13 +155,14 @@ export class DistanceField extends HTMLElement {
 
     // Collect positions and assign unique IDs to all shapes
     this.shapes.forEach((geometry, index) => {
-      const rect = geometry.getBoundingClientRect();
+      const rect = geometry.getClientRect();
 
+      const windowWidth = window.innerWidth;
       // Convert DOM coordinates to Normalized Device Coordinates (NDC)
-      const x1 = (rect.left / window.innerWidth) * 2 - 1;
-      const y1 = -((rect.top / window.innerHeight) * 2 - 1);
-      const x2 = (rect.right / window.innerWidth) * 2 - 1;
-      const y2 = -((rect.bottom / window.innerHeight) * 2 - 1);
+      const x1 = (rect.left / windowWidth) * 2 - 1;
+      const y1 = -((rect.top / windowWidth) * 2 - 1);
+      const x2 = (rect.right / windowWidth) * 2 - 1;
+      const y2 = -((rect.bottom / windowWidth) * 2 - 1);
 
       const shapeID = index + 1; // Avoid zero to prevent hash function issues
 
@@ -394,7 +396,7 @@ export class DistanceField extends HTMLElement {
    * @returns A Float32Array of offsets.
    */
   private computeOffsets(stepSize: number): Float32Array {
-    const offsets = [];
+    const offsets: number[] = [];
     for (let y = -1; y <= 1; y++) {
       for (let x = -1; x <= 1; x++) {
         offsets.push((x * stepSize) / this.canvas.width, (y * stepSize) / this.canvas.height);
