diff --git a/src/components/dots.js b/src/components/dots.js
index b34cd15..6966370 100644
--- a/src/components/dots.js
+++ b/src/components/dots.js
@@ -99,7 +99,7 @@ class DotMaker {
 
 	      	// case "hyper-out":
 	      	// 	return 2 * maxr * Math.abs(d.x - this.cx) (d.y - this.cy)) / this.width;
-	      	// case "hyper-in":
+	      	// case "hyoer-in":
 	      	// 	return 2 * maxr * (0.5 * this.width - distance((d.x - this.cx), (d.y - this.cy))) / this.width;
 
 	      	case "noise":
diff --git a/src/index.md b/src/index.md
index 77604b9..e058b36 100644
--- a/src/index.md
+++ b/src/index.md
@@ -25,12 +25,15 @@ import random from "npm:random";
 import * as resvg from 'npm:@resvg/resvg-wasm';
 
 const CELL = 10;
-const mag = 2;
+const MAG = 2;
 const WIDTH = 20;
 const HEIGHT = WIDTH;
 
-const cell = view(Inputs.range([1,20], {value: 10, step:0.1, label: "Cell size"}));
-const aspect = view(Inputs.range([0.1,10], {value: 1, step:0.1, label: "Aspect ratio"}));
+const cell = view(Inputs.range([1,20], {value: 10, step:1, label: "Cell size"}));
+const mag = view(Inputs.range([1,5], {value: 2, step:1, label: "Magnificaton"}));
+const width = view(Inputs.range([1,40], {value: 20, step:1, label: "Width"}));
+const height = view(Inputs.range([1,40], {value: 20, step:1, label: "Height"}));
+
 
 ```
 
@@ -124,7 +127,6 @@ if( palette_fn ) {
 
 ```js
 
-const height = width / aspect;
 const dm = new DotMaker(width, height);
 
 const dots1 = dm.dots(1 / m1, n1, false);