diff --git a/index.html b/index.html
index f6c8f59..e6d02b1 100644
--- a/index.html
+++ b/index.html
@@ -131,6 +131,7 @@
 	-->
       <a-console position="0 2 -0.8" rotation="-5 0 0" font-size="34" height=1 skip-intro=true></a-console>
 
+      <a-entity playground></a-entity>
       <a-troika-text value="Biggu's Gate" outline-width="5%" font="../content/ChakraPetch-Regular.ttf" position="0 2 -0.5"
 	rotation="25 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #00f"></a-troika-text>
 	<a-gltf-model hide-on-enter-ar="" src="../content/winterset/Mountains.glb" position="0 0 0" rotation="0 0 0" scale="10 10 10" class="clonableasset"></a-gltf-model>
diff --git a/jxr.js b/jxr.js
index eba384b..e1d2988 100644
--- a/jxr.js
+++ b/jxr.js
@@ -3451,6 +3451,45 @@ function addAnnotation(el, content){
 	return el
 }
 
+AFRAME.registerComponent('playground', {
+  //schema: { content : {type: 'string'} },
+  init: function () {
+	// could come from content as a string for sufficiently small examples e.g 3x3
+	let h = [
+		[1,1,1,1,1,1,1,1,1,1],
+		[1,0,0,0,1,0,0,0,0,1],
+		[1,0,0,0,0,1,0,0,0,1],
+		[1,0,0,0,1,0,0,0,0,1],
+		[1,0,0,0,0,1,0,0,0,1],
+		[1,0,0,0,1,0,0,0,0,1],
+		[1,0,0,0,0,1,0,0,0,1],
+		[1,0,0,0,1,0,0,0,0,1],
+		[1,0,0,0,0,1,0,0,0,1],
+		[1,1,1,1,1,1,1,1,1,1],
+	]
+	for (let z=0;z<10;z++)
+		for (let x=0;x<10;x++){
+			let el = document.createElement("a-entity")
+			el.setAttribute('position', (x-5) + ' 0 ' + (z-5) )
+			el.setAttribute('geometry', "primitive: cylinder; segmentsRadial: 8; segmentsHeight: 1; radius: 0.5; height: "+(h[x][z]+.1)+";" )
+			el.setAttribute('material', 'color', 'lightblue')
+			this.el.appendChild(el)
+		}
+  }
+})
+
+
+AFRAME.registerComponent('unpackable', {
+  //schema: { content : {type: 'string'} },
+  init: function () {
+	// (this.el, this.data.content)
+  },
+  update: function () {
+  },
+  remove: function () {
+  }
+})
+
 // used for testing, now that jxr.js is outside of index.html, could consider putting this back in index.html instead to keep behavior one would expect from a library
 // does indeed create problems, namely other pages relying on it do get this testing behavior
 AFRAME.registerComponent('startfunctions', {
@@ -3494,27 +3533,6 @@ see https://git.benetou.fr/utopiah/text-code-xr-engine/issues/52 for more shorth
 	el.setAttribute('scale', '.1 .1 .1') 
 	AFRAME.scenes[0].appendChild(el)
 
-	let h = [
-		[1,1,1,1,1,1,1,1,1,1],
-		[1,0,0,0,1,0,0,0,0,1],
-		[1,0,0,0,0,1,0,0,0,1],
-		[1,0,0,0,1,0,0,0,0,1],
-		[1,0,0,0,0,1,0,0,0,1],
-		[1,0,0,0,1,0,0,0,0,1],
-		[1,0,0,0,0,1,0,0,0,1],
-		[1,0,0,0,1,0,0,0,0,1],
-		[1,0,0,0,0,1,0,0,0,1],
-		[1,1,1,1,1,1,1,1,1,1],
-	]
-	for (let z=0;z<10;z++)
-		for (let x=0;x<10;x++){
-			el = document.createElement("a-entity")
-			el.setAttribute('position', (x-5) + ' 0 ' + (z-5) )
-			el.setAttribute('geometry', "primitive: cylinder; segmentsRadial: 8; segmentsHeight: 1; radius: 0.5; height: "+(h[x][z]+.1)+";" )
-			el.setAttribute('material', 'color', 'lightblue')
-			AFRAME.scenes[0].appendChild(el)
-		}
-
 	// consider instanciateFromPrimitive() also in order to clone a set of blocks
   }
 })