diff --git a/demo/audio-beats-with-event-propagators.html b/demo/audio-beats-with-event-propagators.html
index 7839514..a46f2a3 100644
--- a/demo/audio-beats-with-event-propagators.html
+++ b/demo/audio-beats-with-event-propagators.html
@@ -26,18 +26,6 @@
     </style>
   </head>
   <body>
-    <folk-shape x="100" y="100">
-      <folk-metronome bpm="120"></folk-metronome>
-    </folk-shape>
-
-    <folk-shape x="200" y="100">
-      <audio id="kick" src="/Kick_Bouncy.wav" controls></audio>
-    </folk-shape>
-
-    <folk-shape x="200" y="200">
-      <audio id="hat" src="/Hat_Closed.wav" controls></audio>
-    </folk-shape>
-
     <folk-event-propagator
       source="folk-metronome"
       target="#kick"
@@ -52,9 +40,20 @@
       expression="play(): from.beat % 3"
     ></folk-event-propagator>
 
+    <folk-shape x="100" y="100">
+      <folk-metronome bpm="120"></folk-metronome>
+    </folk-shape>
+
+    <folk-shape x="200" y="100">
+      <audio id="kick" src="/Kick_Bouncy.wav" controls></audio>
+    </folk-shape>
+
+    <folk-shape x="200" y="200">
+      <audio id="hat" src="/Hat_Closed.wav" controls></audio>
+    </folk-shape>
+
     <script type="module">
       import '../src/standalone/folk-shape.ts';
-      import '../src/standalone/folk-llm.ts';
       import './src/folk-metronome.ts';
       import '../src/standalone/folk-event-propagator.ts';
     </script>
diff --git a/demo/music-crossfader.html b/demo/music-crossfader.html
new file mode 100644
index 0000000..fbdcc6a
--- /dev/null
+++ b/demo/music-crossfader.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Beats</title>
+    <style>
+      html {
+        height: 100%;
+      }
+
+      body {
+        min-height: 100%;
+        position: relative;
+        margin: 0;
+      }
+
+      folk-shape {
+        border: 1px solid black;
+        border-radius: 4px;
+      }
+
+      cross-fader {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-template:
+          'track1 track2'
+          'fader fader';
+        row-gap: 20px;
+
+        record-player:nth-child(1) {
+          grid-area: track1;
+        }
+
+        record-player:nth-child(2) {
+          grid-area: track2;
+          scale: -1 1;
+        }
+
+        input {
+          grid-area: fader;
+          justify-self: center;
+          margin: 0;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <folk-shape x="200" y="100">
+      <cross-fader>
+        <record-player id="track1">
+          <audio src="/Feather.mov"></audio>
+        </record-player>
+        <record-player id="track2">
+          <audio src="/Comanche (Heyoka Remix).wav"></audio>
+        </record-player>
+        <!-- Can also use any audio or video element -->
+        <!-- <audio id="track1" src="/Feather.mov" controls></audio>
+        <audio id="track2" src="/Comanche (Heyoka Remix).wav" controls></audio> -->
+        <input id="fader" type="range" min="-1" max="1" step="0.001" />
+      </cross-fader>
+    </folk-shape>
+
+    <folk-event-propagator
+      source="#fader"
+      target="#track1"
+      trigger="input"
+      expression="volume: Math.sqrt((1 - from.valueAsNumber) / 2)"
+    ></folk-event-propagator>
+
+    <folk-event-propagator
+      source="#fader"
+      target="#track2"
+      trigger="input"
+      expression="volume: Math.sqrt((1 + from.valueAsNumber) / 2)"
+    ></folk-event-propagator>
+
+    <script type="module">
+      import './src/record-player.ts';
+      import '../src/standalone/folk-shape.ts';
+      import '../src/standalone/folk-event-propagator.ts';
+    </script>
+  </body>
+</html>
diff --git a/demo/public/Comanche (Heyoka Remix).wav b/demo/public/Comanche (Heyoka Remix).wav
new file mode 100644
index 0000000..4251926
Binary files /dev/null and b/demo/public/Comanche (Heyoka Remix).wav differ
diff --git a/demo/src/record-player.ts b/demo/src/record-player.ts
index 64fe9df..db3bd57 100644
--- a/demo/src/record-player.ts
+++ b/demo/src/record-player.ts
@@ -8,16 +8,13 @@ const styles = css`
 
   :host {
     display: block;
+    position: relative;
   }
 
   .player {
     background-color: #d52831;
     width: 330px;
     height: 190px;
-    position: absolute;
-    transform: translate(-50%, -50%);
-    left: 50%;
-    top: 50%;
     border-radius: 10px;
     box-shadow: 0 8px 0 0 #be2728;
     margin-top: -4px;
@@ -244,7 +241,7 @@ export class RecordPlayer extends HTMLElement {
           <div class="control"></div>
         </div>
         <button class="btn"></button>
-        <input type="range" class="slider" min="0" max="1" step="0.05" value="0.5" />
+        <input type="range" class="slider" min="0" max="1" step="0.01" value="1" />
       </div>
       <slot></slot>`);
 
@@ -260,6 +257,11 @@ export class RecordPlayer extends HTMLElement {
     return this.#audio.volume;
   }
 
+  set volume(volume) {
+    this.#audio.volume = volume;
+    this.#volumeInput.valueAsNumber = volume;
+  }
+
   #playTimeout: number = -1;
 
   play() {
