diff --git a/labs/folk-graph.ts b/labs/folk-graph.ts
index 2c72f8c..3430b59 100644
--- a/labs/folk-graph.ts
+++ b/labs/folk-graph.ts
@@ -69,9 +69,7 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo
     const colaNodes = this.#createNodes();
     const colaLinks = this.#createLinks();
 
-    console.log(colaNodes, colaLinks);
-
-    this.#graphSim.nodes(colaNodes).links(colaLinks).linkDistance(250).avoidOverlaps(true).handleDisconnected(true);
+    this.#graphSim.nodes(colaNodes).links(colaLinks).linkDistance(400).avoidOverlaps(true).handleDisconnected(true);
   }
 
   #createNodes() {
@@ -93,7 +91,7 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo
 
   #createLinks() {
     return Array.from(this.sourceElements)
-      .filter((element): element is FolkBaseConnection => element instanceof FolkBaseConnection)
+      .filter((element) => element instanceof FolkBaseConnection)
       .map((arrow) => {
         this.#arrows.add(arrow);
         const source = this.#nodes.get(arrow.sourceElement as FolkShape);
diff --git a/website/canvas/fluid-semantic-zoom-in-a-canvas.html b/website/canvas/fluid-semantic-zoom-in-a-canvas.html
index f836979..1f2d41b 100644
--- a/website/canvas/fluid-semantic-zoom-in-a-canvas.html
+++ b/website/canvas/fluid-semantic-zoom-in-a-canvas.html
@@ -78,41 +78,44 @@
       <input type="range" min="0" max="1" value="1" step="0.01" />
     </label>
 
-    <folk-shape id="box1" x="100" y="100">
-      <h2>Lorem ispum</h2>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </p>
-    </folk-shape>
+    <folk-graph>
+      <folk-shape id="box1" x="100" y="100">
+        <h2>Lorem ispum</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </p>
+      </folk-shape>
 
-    <folk-shape id="box2" x="500" y="400">
-      <h2>Dolor sit amet</h2>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.
-      </p>
-    </folk-shape>
+      <folk-shape id="box2" x="500" y="400">
+        <h2>Dolor sit amet</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat.
+        </p>
+      </folk-shape>
 
-    <folk-shape id="box3" x="150" y="600">
-      <h2>Consectetur elit</h2>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua.
-      </p>
-    </folk-shape>
+      <folk-shape id="box3" x="150" y="600">
+        <h2>Consectetur elit</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua.
+        </p>
+      </folk-shape>
 
-    <folk-arrow source="#box1" target="#box2"></folk-arrow>
-    <folk-arrow source="#box2" target="#box3"></folk-arrow>
-    <folk-arrow source="#box1" target="#box3"></folk-arrow>
+      <folk-arrow source="#box1" target="#box2"></folk-arrow>
+      <folk-arrow source="#box2" target="#box3"></folk-arrow>
+      <folk-arrow source="#box1" target="#box3"></folk-arrow>
+    </folk-graph>
 
     <script type="module">
       import '@labs/standalone/folk-shape.ts';
       import '@labs/standalone/folk-arrow.ts';
+      import '@labs/standalone/folk-graph.ts';
 
       const range = document.querySelector('input');