diff --git a/demo/animated-shapes.html b/demo/animated-shapes.html
index dfce90b..0101703 100644
--- a/demo/animated-shapes.html
+++ b/demo/animated-shapes.html
@@ -52,25 +52,25 @@
         height: 100%;
       }
 
-      fc-geometry {
+      folk-shape {
         background: black;
         color: white;
       }
     </style>
   </head>
   <body>
-    <fc-geometry x="100" y="100" width="50" height="50">
+    <folk-shape x="100" y="100" width="50" height="50">
       <h2>Lorem ipsum</h2>
-    </fc-geometry>
-    <fc-geometry x="100" y="200" width="50" height="50"></fc-geometry>
-    <fc-geometry x="100" y="300" width="50" height="50"></fc-geometry>
+    </folk-shape>
+    <folk-shape x="100" y="200" width="50" height="50"></folk-shape>
+    <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
 
-      const geos = document.querySelectorAll('fc-geometry');
+      const geos = document.querySelectorAll('folk-shape');
 
       geos.forEach((el, i) => (el.style.viewTransitionName = `g${i}`));
 
diff --git a/demo/arrows.html b/demo/arrows.html
index b8ac98c..664c60c 100644
--- a/demo/arrows.html
+++ b/demo/arrows.html
@@ -15,12 +15,12 @@
         margin: 0;
       }
 
-      fc-geometry {
+      folk-shape {
         border: 1px solid black;
         border-radius: 3px;
       }
 
-      fc-connection {
+      folk-connection {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
@@ -28,16 +28,16 @@
     </style>
   </head>
   <body>
-    <fc-geometry id="box1" x="50" y="100" width="50" height="50"></fc-geometry>
-    <fc-geometry id="box2" x="150" y="300" width="50" height="50"></fc-geometry>
-    <fc-connection source="#box1" target="#box2"></fc-connection>
+    <folk-shape id="box1" x="50" y="100" width="50" height="50"></folk-shape>
+    <folk-shape id="box2" x="150" y="300" width="50" height="50"></folk-shape>
+    <folk-connection source="#box1" target="#box2"></folk-connection>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
-      import { FolkConnection } from '../src/arrows/fc-connection.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkConnection } from '../src/arrows/folk-connection.ts';
       import '../src/arrows/iframe-script.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       FolkConnection.define();
     </script>
   </body>
diff --git a/demo/beats.html b/demo/beats.html
index 21d5330..e059cdb 100644
--- a/demo/beats.html
+++ b/demo/beats.html
@@ -22,7 +22,7 @@
         pointer-events: none;
       }
 
-      fc-geometry {
+      folk-shape {
         border: 1px solid black;
         border-radius: 4px;
       }
@@ -33,17 +33,17 @@
     </style>
   </head>
   <body>
-    <fc-geometry x="100" y="100">
+    <folk-shape x="100" y="100">
       <folk-metronome bpm="120"></folk-metronome>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry x="200" y="100">
+    <folk-shape x="200" y="100">
       <audio id="kick" src="/Kick_Bouncy.wav" controls></audio>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry x="200" y="200">
+    <folk-shape x="200" y="200">
       <audio id="hat" src="/Hat_Closed.wav" controls></audio>
-    </fc-geometry>
+    </folk-shape>
 
     <event-propagator
       source="folk-metronome"
@@ -60,12 +60,12 @@
     ></event-propagator>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
       import { FolkLLM } from '../src/folk-llm.ts';
       import { FolkMetronome } from '../src/folk-metronome.ts';
       import { EventPropagator } from '../src/arrows/event-propagator.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       FolkLLM.define();
       FolkMetronome.define();
       EventPropagator.define();
diff --git a/demo/canvasify.html b/demo/canvasify.html
index aaf7a03..9f8e063 100644
--- a/demo/canvasify.html
+++ b/demo/canvasify.html
@@ -35,7 +35,7 @@
         font-style: italic;
       }
 
-      fc-geometry {
+      folk-shape {
         z-index: 2;
       }
     </style>
@@ -100,9 +100,9 @@
     </main>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
 
       function copyStyles(from, to) {
         const styles = getComputedStyle(from);
@@ -115,7 +115,7 @@
       }
 
       document.addEventListener('click', ({ target }) => {
-        if (target.closest('fc-geometry') || target.matches('body, html')) return;
+        if (target.closest('folk-shape') || target.matches('body, html')) return;
 
         const rect = target.getBoundingClientRect();
 
@@ -133,7 +133,7 @@
           copyStyles(el, copiedElements[i]);
         });
 
-        const geometry = document.createElement('fc-geometry');
+        const geometry = document.createElement('folk-shape');
         geometry.x = rect.x;
         geometry.y = rect.y;
         geometry.height = rect.height;
diff --git a/demo/chains-of-thought/index.html b/demo/chains-of-thought/index.html
index db6dd2d..acbba50 100644
--- a/demo/chains-of-thought/index.html
+++ b/demo/chains-of-thought/index.html
@@ -36,13 +36,13 @@
         }
       }
 
-      fc-connection {
+      folk-connection {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
       }
 
-      fc-geometry {
+      folk-shape {
         border-radius: 7px;
 
         &::part(rotate),
diff --git a/demo/chains-of-thought/main.ts b/demo/chains-of-thought/main.ts
index 3538711..7fb4064 100644
--- a/demo/chains-of-thought/main.ts
+++ b/demo/chains-of-thought/main.ts
@@ -1,5 +1,5 @@
-import { FolkGeometry } from '../../src/canvas/fc-geometry.ts';
-import { FolkConnection } from '../../src/arrows/fc-connection.ts';
+import { FolkShape } from '../../src/canvas/folk-shape.ts';
+import { FolkConnection } from '../../src/arrows/folk-connection.ts';
 import { FileSaver } from '../../src/file-system.ts';
 
 declare global {
@@ -18,7 +18,7 @@ class FolkThought extends HTMLElement {
   #deleteButton = this.querySelector('button[name="delete"]') as HTMLButtonElement;
   #text = this.querySelector('[name="text"]') as HTMLElement;
 
-  #geometry = this.parentElement as FolkGeometry;
+  #geometry = this.parentElement as FolkShape;
 
   constructor() {
     super();
@@ -36,15 +36,15 @@ class FolkThought extends HTMLElement {
 
       document
         .querySelectorAll(
-          `fc-connection[source="fc-geometry[id='${this.#geometry.id}']"], 
-          fc-connection[target="fc-geometry[id='${this.#geometry.id}']"]`
+          `folk-connection[source="folk-shape[id='${this.#geometry.id}']"], 
+          folk-connection[target="folk-shape[id='${this.#geometry.id}']"]`
         )
         .forEach((el) => el.remove());
     }
   }
 }
 
-FolkGeometry.define();
+FolkShape.define();
 FolkThought.define();
 FolkConnection.define();
 
@@ -72,19 +72,19 @@ function parseHTML(html: string): Element {
 }
 
 function renderThought({ id, x, y, text }: Thought) {
-  return html`<fc-geometry id="${id}" x="${x}" y="${y}">
+  return html`<folk-shape id="${id}" x="${x}" y="${y}">
     <fc-thought>
       <div contenteditable="true" name="text">${text}</div>
       <button name="delete">␡</button>
     </fc-thought>
-  </fc-geometry>`;
+  </folk-shape>`;
 }
 
 function renderConnection({ sourceId, targetId }: Connection) {
-  return html`<fc-connection
-    source="fc-geometry[id='${sourceId}']"
-    target="fc-geometry[id='${targetId}']"
-  ></fc-connection>`;
+  return html`<folk-connection
+    source="folk-shape[id='${sourceId}']"
+    target="folk-shape[id='${targetId}']"
+  ></folk-connection>`;
 }
 
 function renderChainOfThought({ thoughts, connections }: ChainOfThought) {
@@ -93,15 +93,15 @@ function renderChainOfThought({ thoughts, connections }: ChainOfThought) {
 
 function parseChainOfThought(): ChainOfThought {
   return {
-    thoughts: Array.from(document.querySelectorAll('fc-geometry')).map((el) => ({
+    thoughts: Array.from(document.querySelectorAll('folk-shape')).map((el) => ({
       id: el.id,
       text: (el.firstElementChild as FolkThought).text,
       x: el.x,
       y: el.y,
     })),
-    connections: Array.from(document.querySelectorAll('fc-connection')).map((el) => ({
-      sourceId: (el.sourceElement as FolkGeometry).id,
-      targetId: (el.targetElement as FolkGeometry).id,
+    connections: Array.from(document.querySelectorAll('folk-connection')).map((el) => ({
+      sourceId: (el.sourceElement as FolkShape).id,
+      targetId: (el.targetElement as FolkShape).id,
     })),
   };
 }
diff --git a/demo/collision.html b/demo/collision.html
index ab6d99c..7f92d3c 100644
--- a/demo/collision.html
+++ b/demo/collision.html
@@ -19,22 +19,22 @@
         margin: 0;
       }
 
-      fc-geometry {
+      folk-shape {
         border: 2px solid black;
       }
     </style>
   </head>
   <body>
-    <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>
+    <folk-shape x="100" y="100" width="50" height="50"> Hello World </folk-shape>
+    <folk-shape x="200" y="200" width="50" height="50"></folk-shape>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
       import { collisionDetection } from '../src/collision.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
 
-      const geometryElements = document.querySelectorAll('fc-geometry');
+      const geometryElements = document.querySelectorAll('folk-shape');
 
       function handleCollision(e) {
         geometryElements.forEach((el) => {
diff --git a/demo/distance-perf.html b/demo/distance-perf.html
index 1a87ee1..c561a4a 100644
--- a/demo/distance-perf.html
+++ b/demo/distance-perf.html
@@ -15,7 +15,7 @@
         margin: 0;
       }
 
-      fc-geometry {
+      folk-shape {
         border: 2px solid black;
       }
 
@@ -29,9 +29,9 @@
     <distance-field> </distance-field>
     <script type="module">
       import { DistanceField } from '../src/distance-field.ts';
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
 
       const d = document.querySelector('distance-field');
 
@@ -40,7 +40,7 @@
       const now = performance.now();
       for (let i = 0; i < 20; i++) {
         for (let j = 0; j < 20; j++) {
-          const geo = document.createElement('fc-geometry');
+          const geo = document.createElement('folk-shape');
           geo.x = 100 * i + Math.floor(Math.random() * 45);
           geo.y = 100 * j + Math.floor(Math.random() * 45);
           geo.width = geo.height = 45;
diff --git a/demo/distance.html b/demo/distance.html
index 1e33c09..149f348 100644
--- a/demo/distance.html
+++ b/demo/distance.html
@@ -16,7 +16,7 @@
         overscroll-behavior: none;
       }
 
-      fc-geometry {
+      folk-shape {
         background: transparent;
         position: absolute;
         background-color: rgba(255, 255, 255, 0.1);
@@ -32,20 +32,20 @@
   </head>
   <body>
     <distance-field>
-      <fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
-      <fc-geometry x="100" y="200" width="50" height="50"></fc-geometry>
-      <fc-geometry x="100" y="300" width="50" height="50"></fc-geometry>
-      <fc-geometry x="300" y="150" width="80" height="40"></fc-geometry>
-      <fc-geometry x="400" y="250" width="60" height="90"></fc-geometry>
-      <fc-geometry x="200" y="400" width="100" height="100"></fc-geometry>
-      <fc-geometry x="500" y="100" width="30" height="70"></fc-geometry>
+      <folk-shape x="100" y="100" width="50" height="50"></folk-shape>
+      <folk-shape x="100" y="200" width="50" height="50"></folk-shape>
+      <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
+      <folk-shape x="300" y="150" width="80" height="40"></folk-shape>
+      <folk-shape x="400" y="250" width="60" height="90"></folk-shape>
+      <folk-shape x="200" y="400" width="100" height="100"></folk-shape>
+      <folk-shape x="500" y="100" width="30" height="70"></folk-shape>
     </distance-field>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
       import { DistanceField } from '../src/distance-field.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       DistanceField.define();
     </script>
   </body>
diff --git a/demo/event-propagator.html b/demo/event-propagator.html
index 8b812b8..3a832e4 100644
--- a/demo/event-propagator.html
+++ b/demo/event-propagator.html
@@ -15,7 +15,7 @@
         margin: 0;
       }
 
-      fc-geometry {
+      folk-shape {
         background-color: black;
         border-radius: 5px;
         color: white;
@@ -32,8 +32,8 @@
     </style>
   </head>
   <body>
-    <fc-geometry id="box1" x="100" y="100" width="30" height="30"></fc-geometry>
-    <fc-geometry id="box2" x="200" y="350">Hello World</fc-geometry>
+    <folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
+    <folk-shape id="box2" x="200" y="350">Hello World</folk-shape>
     <event-propagator
       source="#box1"
       target="#box2"
@@ -41,8 +41,8 @@
       expression="textContent: _ + '!'"
     ></event-propagator>
 
-    <fc-geometry id="box3" x="350" y="200" width="30" height="30"></fc-geometry>
-    <fc-geometry id="box4" x="500" y="250" width="30" height="30"></fc-geometry>
+    <folk-shape id="box3" x="350" y="200" width="30" height="30"></folk-shape>
+    <folk-shape id="box4" x="500" y="250" width="30" height="30"></folk-shape>
     <event-propagator
       source="#box3"
       target="#box4"
@@ -52,10 +52,10 @@ rotate: from.x"
     ></event-propagator>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
       import { EventPropagator } from '../src/arrows/event-propagator.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       EventPropagator.define();
     </script>
   </body>
diff --git a/demo/hull.html b/demo/hull.html
index 4eecdca..5b74dab 100644
--- a/demo/hull.html
+++ b/demo/hull.html
@@ -15,7 +15,7 @@
         margin: 0;
       }
 
-      fc-geometry {
+      folk-shape {
         background: rgb(187, 178, 178);
       }
 
@@ -29,17 +29,17 @@
     </style>
   </head>
   <body>
-    <fc-geometry x="50" y="100" width="50" height="50"></fc-geometry>
-    <fc-geometry x="200" y="200" width="50" height="50"></fc-geometry>
-    <fc-geometry x="100" y="300" width="50" height="50"></fc-geometry>
+    <folk-shape x="50" y="100" width="50" height="50"></folk-shape>
+    <folk-shape x="200" y="200" width="50" height="50"></folk-shape>
+    <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
 
-    <folk-hull sources="fc-geometry"></folk-hull>
+    <folk-hull sources="folk-shape"></folk-hull>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
       import { FolkHull } from '../src/folk-hull.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       FolkHull.define();
     </script>
   </body>
diff --git a/demo/iframed-arrows.html b/demo/iframed-arrows.html
index bac351b..0e4ce7a 100644
--- a/demo/iframed-arrows.html
+++ b/demo/iframed-arrows.html
@@ -15,12 +15,12 @@
         margin: 0;
       }
 
-      fc-geometry {
+      folk-shape {
         border: 1px solid black;
         border-radius: 3px;
       }
 
-      fc-rope {
+      folk-rope {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
@@ -34,20 +34,20 @@
     </style>
   </head>
   <body>
-    <fc-geometry x="10" y="100" width="250" height="400">
+    <folk-shape x="10" y="100" width="250" height="400">
       <iframe id="frame1" src="./arrows.html"></iframe>
-    </fc-geometry>
-    <fc-geometry x="300" y="100" width="250" height="400">
+    </folk-shape>
+    <folk-shape x="300" y="100" width="250" height="400">
       <iframe id="frame2" src="./arrows.html"></iframe>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-rope source="#frame1 >>> #box1" target="#frame2 >>> #box1"></fc-rope>
+    <folk-rope source="#frame1 >>> #box1" target="#frame2 >>> #box1"></folk-rope>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
-      import { FolkRope } from '../src/arrows/fc-rope.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkRope } from '../src/arrows/folk-rope.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       FolkRope.define();
     </script>
   </body>
diff --git a/demo/ink.html b/demo/ink.html
index 00e9242..7c9cc16 100644
--- a/demo/ink.html
+++ b/demo/ink.html
@@ -21,10 +21,10 @@
       <button on:click="DRAW">Draw</button>
     </nav>
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
       import { FolkInk } from '../src/folk-ink.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       FolkInk.define();
 
       const drawButton = document.querySelector('button');
@@ -45,7 +45,7 @@
 
         ink.points = ink.points.map(([x, y, p]) => [x - rect.x, y - rect.y, p]);
 
-        const geometry = document.createElement('fc-geometry');
+        const geometry = document.createElement('folk-shape');
         geometry.x = rect.x;
         geometry.y = rect.y;
         geometry.height = rect.height;
diff --git a/demo/llm.html b/demo/llm.html
index 6188f1a..2e5b693 100644
--- a/demo/llm.html
+++ b/demo/llm.html
@@ -22,7 +22,7 @@
         pointer-events: none;
       }
 
-      fc-geometry {
+      folk-shape {
         border: 1px solid black;
         border-radius: 4px;
       }
@@ -40,7 +40,7 @@
     </style>
   </head>
   <body>
-    <fc-geometry x="100" y="100" width="250">
+    <folk-shape x="100" y="100" width="250">
       <ul id="recipe" class="wprm-recipe-ingredients">
         <li class="wprm-recipe-ingredient" style="list-style-type: disc" data-uid="0">
           <span class="wprm-recipe-ingredient-amount">500</span>
@@ -74,15 +74,15 @@
           <span class="wprm-recipe-ingredient-notes wprm-recipe-ingredient-notes-faded">about 1 Tbsp</span>
         </li>
       </ul>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry x="400" y="100" width="250">
+    <folk-shape x="400" y="100" width="250">
       <folk-llm system-prompt="Output text as HTML, no backticks"></folk-llm>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry x="700" y="200">
+    <folk-shape x="700" y="200">
       <folk-timer></folk-timer>
-    </fc-geometry>
+    </folk-shape>
 
     <event-propagator
       source="#recipe"
@@ -107,12 +107,12 @@
     ></event-propagator>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
       import { FolkLLM } from '../src/folk-llm.ts';
       import { FolkTimer } from '../src/folk-timer.ts';
       import { EventPropagator } from '../src/arrows/event-propagator.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       FolkLLM.define();
       FolkTimer.define();
       EventPropagator.define();
diff --git a/demo/perf.html b/demo/perf.html
index be409b4..2858700 100644
--- a/demo/perf.html
+++ b/demo/perf.html
@@ -15,23 +15,23 @@
         margin: 0;
       }
 
-      fc-geometry {
+      folk-shape {
         border: 2px solid black;
       }
     </style>
   </head>
   <body>
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
 
       const geometries = [];
 
       const now = performance.now();
       for (let i = 0; i < 100; i++) {
         for (let j = 0; j < 100; j++) {
-          const geo = document.createElement('fc-geometry');
+          const geo = document.createElement('folk-shape');
           geo.x = 50 * i;
           geo.y = 50 * j;
           geo.width = geo.height = 45;
diff --git a/demo/proximity-maps.html b/demo/proximity-maps.html
index 4c48921..cbb4dba 100644
--- a/demo/proximity-maps.html
+++ b/demo/proximity-maps.html
@@ -58,25 +58,25 @@
   </head>
   <body>
     <folk-proximity>
-      <fc-geometry id="g1" x="25" y="100" width="400" height="200">
+      <folk-shape id="g1" x="25" y="100" width="400" height="200">
         <folk-map coordinates="40.76845173617708, -73.97983074188234" zoom="15"></folk-map>
-      </fc-geometry>
+      </folk-shape>
 
-      <fc-geometry id="g2" x="50" y="600" width="400" height="250">
+      <folk-shape id="g2" x="50" y="600" width="400" height="250">
         <folk-map coordinates="51.50404120260676, -0.14007568359375003" zoom="13"></folk-map>
-      </fc-geometry>
+      </folk-shape>
 
-      <fc-geometry id="g3" x="500" y="500" width="500" height="300">
+      <folk-shape id="g3" x="500" y="500" width="500" height="300">
         <geo-wiki></geo-wiki>
-      </fc-geometry>
+      </folk-shape>
 
-      <fc-geometry id="g4" x="450" y="100">
+      <folk-shape id="g4" x="450" y="100">
         <folk-weather></folk-weather>
-      </fc-geometry>
+      </folk-shape>
     </folk-proximity>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
       import { FolkMap } from '../src/folk-map.ts';
       import { FolkWeather } from '../src/folk-weather.ts';
       import { FolkCluster, FolkProximity } from '../src/folk-proximity.ts';
@@ -183,7 +183,7 @@
         },
       });
 
-      FolkGeometry.define();
+      FolkShape.define();
       FolkMap.define();
       FolkCluster.define();
       FolkProximity.define();
diff --git a/demo/proximity-music.html b/demo/proximity-music.html
index 5be3377..9ed4ac5 100644
--- a/demo/proximity-music.html
+++ b/demo/proximity-music.html
@@ -15,7 +15,7 @@
         margin: 0;
       }
 
-      fc-geometry:has(record-player) {
+      folk-shape:has(record-player) {
         box-shadow: 10px 0px 150px 0px rgba(0, 0, 0, 0.61);
 
         &::part(resize-nw),
@@ -26,45 +26,45 @@
         }
       }
 
-      fc-geometry > video {
+      folk-shape > video {
         height: 100%;
       }
     </style>
   </head>
   <body>
-    <fc-geometry x="100" y="75" width="330" height="198">
+    <folk-shape x="100" y="75" width="330" height="198">
       <record-player>
         <audio src="/Feather.mov"></audio>
       </record-player>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry x="25" y="300" width="166" height="200">
+    <folk-shape x="25" y="300" width="166" height="200">
       <video loop>
         <source src="/dancing-flower.mov" type="video/quicktime" />
         <source src="/dancing-flower.webm" type="video/webm" />
       </video>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry x="155" y="315" width="166" height="200">
+    <folk-shape x="155" y="315" width="166" height="200">
       <video loop>
         <source src="/dancing-flower.mov" type="video/quicktime" />
         <source src="/dancing-flower.webm" type="video/webm" />
       </video>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry x="280" y="305" width="166" height="200">
+    <folk-shape x="280" y="305" width="166" height="200">
       <video loop>
         <source src="/dancing-flower.mov" type="video/quicktime" />
         <source src="/dancing-flower.webm" type="video/webm" />
       </video>
-    </fc-geometry>
+    </folk-shape>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
       import { RecordPlayer } from '../src/music/record-player.ts';
       import { collisionDetection } from '../src/collision.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       RecordPlayer.define();
 
       /**
@@ -75,9 +75,9 @@
 
       let proximityDistance = 150;
       const proximitySet = new Set();
-      const recordPlayerGeometry = document.querySelector('fc-geometry:has(record-player)');
+      const recordPlayerGeometry = document.querySelector('folk-shape:has(record-player)');
       const recordPlayer = recordPlayerGeometry.firstElementChild;
-      const flowers = document.querySelectorAll('fc-geometry:has(video)');
+      const flowers = document.querySelectorAll('folk-shape:has(video)');
       // set playback rate when video is ready
       function setPlayback(e) {
         e.target.playbackRate = (91 / 60) * e.target.duration;
diff --git a/demo/qr-code.html b/demo/qr-code.html
index d21a574..96a049a 100644
--- a/demo/qr-code.html
+++ b/demo/qr-code.html
@@ -40,21 +40,21 @@
   <body rope-mode>
     <label>Rope Mode: <input type="checkbox" checked /></label>
 
-    <fc-geometry x="275" y="25">
+    <folk-shape x="275" y="25">
       <textarea>https://folk-canvas.github.io/folk-canvas/</textarea>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry x="300" y="75">
+    <folk-shape x="300" y="75">
       <label>Radius: <input type="range" min="0" max="0.5" step="0.05" value="0" /></label>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry x="325" y="175">
+    <folk-shape x="325" y="175">
       <label>Color: <input type="color" /></label>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry x="50" y="50">
+    <folk-shape x="50" y="50">
       <sl-qr-code size="200"></sl-qr-code>
-    </fc-geometry>
+    </folk-shape>
 
     <event-propagator
       source="textarea"
@@ -79,10 +79,10 @@
 
     <script type="module">
       import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/qr-code/qr-code.js';
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
       import { EventPropagator } from '../src/arrows/event-propagator.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       EventPropagator.define();
 
       const ropeMode = document.querySelector('input[type="checkbox"]');
diff --git a/demo/semantic-zoom.html b/demo/semantic-zoom.html
index 415e37f..33c7daf 100644
--- a/demo/semantic-zoom.html
+++ b/demo/semantic-zoom.html
@@ -75,13 +75,13 @@
         margin: 1rem;
       }
 
-      fc-connection {
+      folk-connection {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
       }
 
-      fc-geometry {
+      folk-shape {
         background: black;
         color: white;
         max-width: 40ch;
@@ -99,14 +99,14 @@
         }
       }
 
-      body[zoom='0'] fc-geometry {
+      body[zoom='0'] folk-shape {
         width: 20px;
         aspect-ratio: 1;
         border-radius: 50%;
       }
 
-      body[zoom='0'] fc-geometry :is(h2, p),
-      body[zoom='50'] fc-geometry p {
+      body[zoom='0'] folk-shape :is(h2, p),
+      body[zoom='50'] folk-shape p {
         display: none;
       }
     </style>
@@ -117,7 +117,7 @@
       <input type="range" min="0" max="100" value="100" style="view-transition-name: slider" />
     </label>
 
-    <fc-geometry id="box1" x="100" y="100">
+    <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
@@ -126,38 +126,38 @@
         pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
         laborum.
       </p>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry id="box2" x="400" y="400">
+    <folk-shape id="box2" x="400" 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>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry id="box3" x="150" y="600">
+    <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>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-connection source="#box1" target="#box2"></fc-connection>
-    <fc-connection source="#box2" target="#box3"></fc-connection>
-    <fc-connection source="#box1" target="#box3"></fc-connection>
+    <folk-connection source="#box1" target="#box2"></folk-connection>
+    <folk-connection source="#box2" target="#box3"></folk-connection>
+    <folk-connection source="#box1" target="#box3"></folk-connection>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
-      import { FolkConnection } from '../src/arrows/fc-connection.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkConnection } from '../src/arrows/folk-connection.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       FolkConnection.define();
 
-      document.body.querySelectorAll('fc-geometry').forEach((el, i) => (el.style.viewTransitionName = `g${i}`));
-      document.body.querySelectorAll('fc-connection').forEach((el, i) => (el.style.viewTransitionName = `c${i}`));
+      document.body.querySelectorAll('folk-shape').forEach((el, i) => (el.style.viewTransitionName = `g${i}`));
+      document.body.querySelectorAll('folk-connection').forEach((el, i) => (el.style.viewTransitionName = `c${i}`));
       document.body.querySelectorAll('h2').forEach((el, i) => (el.style.viewTransitionName = `h${i}`));
       document.body.querySelectorAll('p').forEach((el, i) => (el.style.viewTransitionName = `p${i}`));
 
diff --git a/demo/shapes.html b/demo/shapes.html
index a654770..cc454eb 100644
--- a/demo/shapes.html
+++ b/demo/shapes.html
@@ -15,20 +15,20 @@
         margin: 0;
       }
 
-      fc-geometry {
+      folk-shape {
         background: rgb(187, 178, 178);
       }
     </style>
   </head>
   <body>
-    <fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
-    <fc-geometry x="100" y="200" width="50" height="50"></fc-geometry>
-    <fc-geometry x="100" y="300" width="50" height="50" rotate="45"></fc-geometry>
+    <folk-shape x="100" y="100" width="50" height="50"></folk-shape>
+    <folk-shape x="100" y="200" width="50" height="50"></folk-shape>
+    <folk-shape x="100" y="300" width="50" height="50" rotate="45"></folk-shape>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
     </script>
   </body>
 </html>
diff --git a/demo/spreadsheet-graph.html b/demo/spreadsheet-graph.html
index fe7ebd7..0165f70 100644
--- a/demo/spreadsheet-graph.html
+++ b/demo/spreadsheet-graph.html
@@ -15,7 +15,7 @@
         margin: 0;
       }
 
-      fc-connection {
+      folk-connection {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
@@ -45,7 +45,7 @@
   </head>
   <body>
     <button>Toggle</button>
-    <fc-geometry x="50" y="50" width="500">
+    <folk-shape x="50" y="50" width="500">
       <folk-spreadsheet>
         <folk-cell
           column="A"
@@ -163,14 +163,14 @@
         <folk-cell column="I" row="10"></folk-cell>
         <folk-cell column="J" row="10"></folk-cell>
       </folk-spreadsheet>
-    </fc-geometry>
+    </folk-shape>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
-      import { FolkConnection } from '../src/arrows/fc-connection.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkConnection } from '../src/arrows/folk-connection.ts';
       import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       FolkConnection.define();
       FolkSpreadsheet.define();
 
@@ -196,7 +196,7 @@
           for (const dep of cell.dependencies) {
             dep.setAttribute('graph', '');
 
-            const connection = document.createElement('fc-connection');
+            const connection = document.createElement('folk-connection');
             connection.source = `folk-cell[row="${dep.row}"][column="${dep.column}"]`;
             connection.target = `folk-cell[row="${cell.row}"][column="${cell.column}"]`;
 
@@ -208,7 +208,7 @@
       function removeOverlayGraph() {
         document.body.removeAttribute('overlay', '');
 
-        document.querySelectorAll('fc-connection').forEach((arrow) => arrow.remove());
+        document.querySelectorAll('folk-connection').forEach((arrow) => arrow.remove());
 
         document.querySelectorAll('folk-cell').forEach((cell) => {
           cell.removeAttribute('graph', '');
diff --git a/demo/spreadsheet-propagator.html b/demo/spreadsheet-propagator.html
index ccdee73..4e786cd 100644
--- a/demo/spreadsheet-propagator.html
+++ b/demo/spreadsheet-propagator.html
@@ -31,15 +31,15 @@
     </style>
   </head>
   <body>
-    <fc-geometry x="600" y="50" width="300" height="300">
+    <folk-shape x="600" y="50" width="300" height="300">
       <folk-map id="map1" zoom="10" coordinates="48.86,2.35"></folk-map>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry x="600" y="400" width="300" height="300">
+    <folk-shape x="600" y="400" width="300" height="300">
       <folk-map id="map2" zoom="10"></folk-map>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry x="25" y="300" width="500">
+    <folk-shape x="25" y="300" width="500">
       <folk-spreadsheet>
         <folk-cell row="1" column="A" expression="0"></folk-cell>
         <folk-cell row="1" column="B"></folk-cell>
@@ -142,7 +142,7 @@
         <folk-cell row="10" column="I"></folk-cell>
         <folk-cell row="10" column="J"></folk-cell>
       </folk-spreadsheet>
-    </fc-geometry>
+    </folk-shape>
 
     <event-propagator
       source="#map1"
@@ -167,12 +167,12 @@
 
     <script type="module">
       import { FolkMap } from '../src/folk-map.ts';
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
       import { EventPropagator } from '../src/arrows/event-propagator.ts';
       import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
 
       FolkMap.define();
-      FolkGeometry.define();
+      FolkShape.define();
       FolkSpreadsheet.define();
       EventPropagator.define();
 
diff --git a/demo/spreadsheet.html b/demo/spreadsheet.html
index cf7cb8e..a1d4531 100644
--- a/demo/spreadsheet.html
+++ b/demo/spreadsheet.html
@@ -17,7 +17,7 @@
     </style>
   </head>
   <body>
-    <fc-geometry x="50" y="50" width="500">
+    <folk-shape x="50" y="50" width="500">
       <folk-spreadsheet>
         <folk-cell column="A" row="1" expression="1"></folk-cell>
         <folk-cell column="B" row="1"></folk-cell>
@@ -120,13 +120,13 @@
         <folk-cell column="I" row="10"></folk-cell>
         <folk-cell column="J" row="10"></folk-cell>
       </folk-spreadsheet>
-    </fc-geometry>
+    </folk-shape>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
       import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       FolkSpreadsheet.define();
     </script>
   </body>
diff --git a/demo/wiggly.html b/demo/wiggly.html
index 26e3598..f197e9c 100644
--- a/demo/wiggly.html
+++ b/demo/wiggly.html
@@ -15,12 +15,12 @@
         margin: 0;
       }
 
-      fc-geometry {
+      folk-shape {
         background-color: black;
         border-radius: 10%;
       }
 
-      fc-rope {
+      folk-rope {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
@@ -29,19 +29,19 @@
     </style>
   </head>
   <body>
-    <fc-geometry id="box1" x="100" y="100" width="30" height="30"></fc-geometry>
-    <fc-geometry id="box2" x="300" y="105" width="30" height="30"></fc-geometry>
-    <fc-geometry id="box3" x="200" y="150" width="30" height="30"></fc-geometry>
-    <fc-geometry id="box4" x="400" y="100" width="30" height="30"></fc-geometry>
-    <fc-rope source="#box1" target="#box2"></fc-rope>
-    <fc-rope source="#box1" target="#box3"></fc-rope>
-    <fc-rope source="#box1" target="#box4"></fc-rope>
+    <folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
+    <folk-shape id="box2" x="300" y="105" width="30" height="30"></folk-shape>
+    <folk-shape id="box3" x="200" y="150" width="30" height="30"></folk-shape>
+    <folk-shape id="box4" x="400" y="100" width="30" height="30"></folk-shape>
+    <folk-rope source="#box1" target="#box2"></folk-rope>
+    <folk-rope source="#box1" target="#box3"></folk-rope>
+    <folk-rope source="#box1" target="#box4"></folk-rope>
 
     <script type="module">
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
-      import { FolkRope } from '../src/arrows/fc-rope.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkRope } from '../src/arrows/folk-rope.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       FolkRope.define();
     </script>
   </body>
diff --git a/demo/xanadu.html b/demo/xanadu.html
index 80821f3..7fb3b4f 100644
--- a/demo/xanadu.html
+++ b/demo/xanadu.html
@@ -29,7 +29,7 @@
         overflow-y: hidden;
       }
 
-      fc-geometry {
+      folk-shape {
         background-color: #fefefe;
         width: 400px;
         height: 100%;
@@ -56,7 +56,7 @@
     </style>
   </head>
   <body>
-    <fc-geometry name="1" x="20">
+    <folk-shape name="1" x="20">
       <article>
         <h2>Note 1</h2>
 
@@ -127,9 +127,9 @@
           est laborum.
         </p>
       </article>
-    </fc-geometry>
+    </folk-shape>
 
-    <fc-geometry name="2" x="500">
+    <folk-shape name="2" x="500">
       <article>
         <h2>Note 2</h2>
 
@@ -194,17 +194,17 @@
           Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
       </article>
-    </fc-geometry>
+    </folk-shape>
 
-    <folk-xanadu source="fc-geometry[name='1'] [link='1']" target="fc-geometry[name='2'] [link='1']"></folk-xanadu>
+    <folk-xanadu source="folk-shape[name='1'] [link='1']" target="folk-shape[name='2'] [link='1']"></folk-xanadu>
 
-    <folk-xanadu source="fc-geometry[name='1'] [link='2']" target="fc-geometry[name='2'] [link='2']"></folk-xanadu>
+    <folk-xanadu source="folk-shape[name='1'] [link='2']" target="folk-shape[name='2'] [link='2']"></folk-xanadu>
 
     <script type="module">
       import { FolkXanadu } from '../src/folk-xanadu.ts';
-      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkShape } from '../src/canvas/folk-shape.ts';
 
-      FolkGeometry.define();
+      FolkShape.define();
       FolkXanadu.define();
 
       // class AnimatedXanaduLink extends FolkXanadu {
diff --git a/src/arrows/abstract-arrow.ts b/src/arrows/abstract-arrow.ts
index c3dcabb..01ee0b1 100644
--- a/src/arrows/abstract-arrow.ts
+++ b/src/arrows/abstract-arrow.ts
@@ -1,4 +1,4 @@
-import { FolkGeometry } from '../canvas/fc-geometry.ts';
+import { FolkShape } from '../canvas/folk-shape.ts';
 import { parseVertex } from './utils.ts';
 import { ClientRectObserverEntry, ClientRectObserverManager } from '../client-rect-observer.ts';
 
@@ -43,7 +43,7 @@ export class AbstractArrow extends HTMLElement {
   };
 
   #sourceHandler = (e: Event) => {
-    const geometry = e.target as FolkGeometry;
+    const geometry = e.target as FolkShape;
     this.#sourceRect = geometry.getClientRect();
     this.#update();
   };
@@ -117,7 +117,7 @@ export class AbstractArrow extends HTMLElement {
   };
 
   #targetHandler = (e: Event) => {
-    const geometry = e.target as FolkGeometry;
+    const geometry = e.target as FolkShape;
     this.#targetRect = geometry.getClientRect();
     this.#update();
   };
@@ -190,7 +190,7 @@ export class AbstractArrow extends HTMLElement {
 
       if (this.#sourceElement === null) {
         throw new Error('source is not a valid element');
-      } else if (this.#sourceElement instanceof FolkGeometry) {
+      } else if (this.#sourceElement instanceof FolkShape) {
         this.#sourceElement.addEventListener('resize', this.#sourceHandler);
         this.#sourceElement.addEventListener('move', this.#sourceHandler);
         this.#sourceRect = this.#sourceElement.getBoundingClientRect();
@@ -211,7 +211,7 @@ export class AbstractArrow extends HTMLElement {
   unobserveSource() {
     if (this.#sourceElement === null) return;
 
-    if (this.#sourceElement instanceof FolkGeometry) {
+    if (this.#sourceElement instanceof FolkShape) {
       this.#sourceElement.removeEventListener('resize', this.#sourceHandler);
       this.#sourceElement.removeEventListener('move', this.#sourceHandler);
     } else if (this.#sourceElement instanceof HTMLIFrameElement && this.#sourceIframeSelector) {
@@ -241,7 +241,7 @@ export class AbstractArrow extends HTMLElement {
 
       if (!this.#targetElement) {
         throw new Error('target is not a valid element');
-      } else if (this.#targetElement instanceof FolkGeometry) {
+      } else if (this.#targetElement instanceof FolkShape) {
         this.#targetElement.addEventListener('resize', this.#targetHandler);
         this.#targetElement.addEventListener('move', this.#targetHandler);
       } else if (this.#targetElement instanceof HTMLIFrameElement && this.#targetIframeSelector) {
@@ -261,7 +261,7 @@ export class AbstractArrow extends HTMLElement {
   unobserveTarget() {
     if (this.#targetElement === null) return;
 
-    if (this.#targetElement instanceof FolkGeometry) {
+    if (this.#targetElement instanceof FolkShape) {
       this.#targetElement.removeEventListener('resize', this.#targetHandler);
       this.#targetElement.removeEventListener('move', this.#targetHandler);
     } else if (this.#targetElement instanceof HTMLIFrameElement && this.#targetIframeSelector) {
diff --git a/src/arrows/event-propagator.ts b/src/arrows/event-propagator.ts
index 5588c35..e48233c 100644
--- a/src/arrows/event-propagator.ts
+++ b/src/arrows/event-propagator.ts
@@ -1,4 +1,4 @@
-import { FolkRope } from './fc-rope.ts';
+import { FolkRope } from './folk-rope.ts';
 
 const styles = new CSSStyleSheet();
 styles.replaceSync(`
diff --git a/src/arrows/fc-connection.ts b/src/arrows/folk-connection.ts
similarity index 96%
rename from src/arrows/fc-connection.ts
rename to src/arrows/folk-connection.ts
index 25e5203..912fe46 100644
--- a/src/arrows/fc-connection.ts
+++ b/src/arrows/folk-connection.ts
@@ -26,12 +26,12 @@ export type Arrow = [
 
 declare global {
   interface HTMLElementTagNameMap {
-    'fc-connection': FolkConnection;
+    'folk-connection': FolkConnection;
   }
 }
 
 export class FolkConnection extends AbstractArrow {
-  static override tagName = 'fc-connection';
+  static override tagName = 'folk-connection';
 
   #options: StrokeOptions = {
     size: 7,
diff --git a/src/arrows/fc-rope.ts b/src/arrows/folk-rope.ts
similarity index 99%
rename from src/arrows/fc-rope.ts
rename to src/arrows/folk-rope.ts
index 267b1b7..ff5226a 100644
--- a/src/arrows/fc-rope.ts
+++ b/src/arrows/folk-rope.ts
@@ -21,12 +21,12 @@ interface RopePoint {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'fc-rope': FolkRope;
+    'folk-rope': FolkRope;
   }
 }
 
 export class FolkRope extends AbstractArrow {
-  static override tagName = 'fc-rope';
+  static override tagName = 'folk-rope';
 
   #svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   #path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
diff --git a/src/arrows/iframe-script.ts b/src/arrows/iframe-script.ts
index c5ec4dc..e086004 100644
--- a/src/arrows/iframe-script.ts
+++ b/src/arrows/iframe-script.ts
@@ -1,4 +1,4 @@
-import { FolkGeometry } from '../canvas/fc-geometry';
+import { FolkShape } from '../canvas/folk-shape';
 import { ClientRectObserverManager, ClientRectObserverEntry } from '../client-rect-observer.ts';
 
 const clientRectObserver = new ClientRectObserverManager();
@@ -80,7 +80,7 @@ if (window.parent !== window) {
         observedElements.set(selector, element);
         observedSelectors.set(element, selector);
 
-        if (element instanceof FolkGeometry) {
+        if (element instanceof FolkShape) {
           element.addEventListener('move', onGeometryChange);
           element.addEventListener('resize', onGeometryChange);
 
@@ -100,7 +100,7 @@ if (window.parent !== window) {
 
         if (element === undefined) return;
 
-        if (element instanceof FolkGeometry) {
+        if (element instanceof FolkShape) {
           element.removeEventListener('move', onGeometryChange);
           element.removeEventListener('resize', onGeometryChange);
           observedElements.delete(selector);
diff --git a/src/canvas/fc-geometry.ts b/src/canvas/folk-shape.ts
similarity index 99%
rename from src/canvas/fc-geometry.ts
rename to src/canvas/folk-shape.ts
index a4011a4..124b53e 100644
--- a/src/canvas/fc-geometry.ts
+++ b/src/canvas/folk-shape.ts
@@ -141,13 +141,13 @@ div {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'fc-geometry': FolkGeometry;
+    'folk-shape': FolkShape;
   }
 }
 
 // TODO: add z coordinate?
-export class FolkGeometry extends HTMLElement {
-  static tagName = 'fc-geometry';
+export class FolkShape extends HTMLElement {
+  static tagName = 'folk-shape';
 
   static define() {
     customElements.define(this.tagName, this);
diff --git a/src/distance-field.ts b/src/distance-field.ts
index 7f37727..b39663e 100644
--- a/src/distance-field.ts
+++ b/src/distance-field.ts
@@ -1,6 +1,6 @@
 import { frag, vert } from './utils/tags.ts';
 import { WebGLUtils } from './utils/webgl.ts';
-import type { FolkGeometry } from './canvas/fc-geometry.ts';
+import type { FolkShape } from './canvas/folk-shape.ts';
 
 /**
  * The DistanceField class calculates a distance field using the Jump Flooding Algorithm (JFA) in WebGL.
@@ -12,7 +12,7 @@ export class DistanceField extends HTMLElement {
 
   private textures: WebGLTexture[] = [];
 
-  private shapes!: NodeListOf<FolkGeometry>;
+  private shapes!: NodeListOf<FolkShape>;
   private canvas!: HTMLCanvasElement;
   private glContext!: WebGL2RenderingContext;
   private framebuffer!: WebGLFramebuffer;
@@ -34,7 +34,7 @@ export class DistanceField extends HTMLElement {
   }
 
   connectedCallback() {
-    this.shapes = document.querySelectorAll('fc-geometry');
+    this.shapes = document.querySelectorAll('folk-shape');
     this.initWebGL();
     this.initShaders();
     this.initPingPongTextures();
diff --git a/src/folk-proximity.ts b/src/folk-proximity.ts
index 7170686..ad50784 100644
--- a/src/folk-proximity.ts
+++ b/src/folk-proximity.ts
@@ -1,6 +1,6 @@
 import { collisionDetection } from './collision';
 import { FolkHull } from './folk-hull';
-import { FolkGeometry } from './canvas/fc-geometry.ts';
+import { FolkShape } from './canvas/folk-shape.ts';
 
 interface ElementConstructor<E extends Element = Element> {
   new (): E;
@@ -35,18 +35,18 @@ export class FolkCluster extends FolkHull {
 
   #data = new Map();
 
-  isElementInCluster(element: FolkGeometry) {
+  isElementInCluster(element: FolkShape) {
     return this.sourceElements.includes(element);
   }
 
-  isElementInProximity(element: FolkGeometry) {
-    for (const el of this.sourceElements as FolkGeometry[]) {
+  isElementInProximity(element: FolkShape) {
+    for (const el of this.sourceElements as FolkShape[]) {
       if (collisionDetection(el.getClientRect(), element.getClientRect(), PROXIMITY)) return true;
     }
     return false;
   }
 
-  addElements(...elements: FolkGeometry[]) {
+  addElements(...elements: FolkShape[]) {
     this.sources = this.sourceElements
       .concat(elements)
       .map((el) => `#${el.id}`)
@@ -101,7 +101,7 @@ export class FolkCluster extends FolkHull {
     }
   }
 
-  removeElement(geometry: FolkGeometry) {
+  removeElement(geometry: FolkShape) {
     this.sources = this.sourceElements
       .filter((el) => el !== geometry)
       .map((el) => `#${el.id}`)
@@ -136,7 +136,7 @@ export class FolkProximity extends HTMLElement {
   }
 
   #clusters = new Set<FolkCluster>();
-  #geometries = Array.from(this.querySelectorAll('fc-geometry'));
+  #geometries = Array.from(this.querySelectorAll('folk-shape'));
 
   constructor() {
     super();
@@ -146,7 +146,7 @@ export class FolkProximity extends HTMLElement {
   }
 
   #handleProximity = (e) => {
-    const el = e.target as FolkGeometry;
+    const el = e.target as FolkShape;
 
     const cluster = this.#findCluster(el);
 
@@ -171,7 +171,7 @@ export class FolkProximity extends HTMLElement {
         }
       }
     } else {
-      const isInCluster = (cluster.sourceElements as FolkGeometry[])
+      const isInCluster = (cluster.sourceElements as FolkShape[])
         .filter((element) => el !== element)
         .some((element) => collisionDetection(el.getClientRect(), element.getClientRect(), PROXIMITY));
 
