diff --git a/demo/distance.html b/demo/distance.html
index 4a30f23..e09d185 100644
--- a/demo/distance.html
+++ b/demo/distance.html
@@ -20,7 +20,7 @@
         position: absolute;
       }
 
-      cell-renderer canvas {
+      distance-field canvas {
         position: absolute;
         top: 0;
         left: 0;
@@ -31,7 +31,7 @@
     </style>
   </head>
   <body>
-    <cell-renderer resolution="800" image-smoothing="true">
+    <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>
@@ -39,14 +39,14 @@
       <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>
-    </cell-renderer>
+    </distance-field>
 
     <script type="module">
       import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
-      import { CellRenderer } from '../src/distanceField/cellRenderer.ts';
+      import { DistanceField } from '../src/distanceField/distance-field.ts';
 
       FolkGeometry.define();
-      CellRenderer.define();
+      DistanceField.define();
     </script>
   </body>
 </html>
diff --git a/src/distanceField/cellRenderer.ts b/src/distanceField/distance-field.ts
similarity index 96%
rename from src/distanceField/cellRenderer.ts
rename to src/distanceField/distance-field.ts
index bca45fc..8e23955 100644
--- a/src/distanceField/cellRenderer.ts
+++ b/src/distanceField/distance-field.ts
@@ -2,16 +2,14 @@ import type { FolkGeometry } from '../canvas/fc-geometry.ts';
 import type { Vector2 } from '../utils/Vector2.ts';
 import { Fields } from './fields.ts';
 
-export class CellRenderer extends HTMLElement {
-  static tagName = 'cell-renderer';
+export class DistanceField extends HTMLElement {
+  static tagName = 'distance-field';
 
   static define() {
     customElements.define(this.tagName, this);
   }
 
-  static observedAttributes = ['resolution', 'image-smoothing'];
-
-  private canvas: HTMLCanvasElement;
+  private canvas!: HTMLCanvasElement;
   private ctx: CanvasRenderingContext2D;
   private offscreenCtx: CanvasRenderingContext2D;
   private fields: Fields;
@@ -24,7 +22,7 @@ export class CellRenderer extends HTMLElement {
   constructor() {
     super();
 
-    this.resolution = 2000; // default resolution
+    this.resolution = 800; // default resolution
     this.imageSmoothing = true;
     this.fields = new Fields(this.resolution);
 
