diff --git a/index.html b/index.html
index eab2968..48c9847 100644
--- a/index.html
+++ b/index.html
@@ -2459,6 +2459,18 @@ const notes = {"C": "#7af500", "C#": "#00f500", "D": "#00f57a", "D#": "#00f5f5",
 const drumKit = { "C": "bass.wav", "C#": "clap.wav", "D": "cymbal.wav", "D#": "hi hat.wav", "E": "bass.wav", "F": "clap.wav", "F#": "cymbal.wav", "G": "hi hat.wav" }
 const drumkitBaseURL = "https://fabien.benetou.fr/pub/home/future_of_text_demo/content/Roland808DrumKit/"
 
+AFRAME.registerComponent('collider-check', {
+// to test with
+// testNote = addBlockCodeExample("A"); testNote.classList.add("musicalnote"); testNote.setAttribute("position", "0 1.5 -0.2")
+// didn't work even with a primitive...
+  dependencies: ['raycaster'],
+  init: function () {
+    this.el.addEventListener('raycaster-intersection', function () {
+      console.log('Player hit something!');
+    });
+  }
+});
+
 AFRAME.registerComponent('play-musicalnote-on-pinchend-secondary', {
 	schema: {
 		note: {type: 'string', default: 'C3'}
@@ -2504,6 +2516,13 @@ AFRAME.registerComponent('play-musicalnote-on-pinchend-secondary', {
 		<a-entity id="leftHand" pinchsecondary wristattachsecondary="target: #box" hand-tracking-controls="hand: left;"></a-entity>
       </a-entity>
 
+  <a-entity id=ray collider-check raycaster="objects: .musicalnote; showLine: true;" position="0 -0.9 -0.2" rotation="90 0 0"></a-entity>
+
+<a-entity id="player" collider-check>
+  <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
+</a-entity>
+<a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
+
   <!-- Floor -->
   <a-plane rotation="-90 0 0" scale="5 5 5" position="0 1 0" opacity=.5 static-body></a-plane>