diff --git a/src/cubing/twisty/views/TwistyAlgViewer.ts b/src/cubing/twisty/views/TwistyAlgViewer.ts
index 92ed54ddf..8e99562d3 100644
--- a/src/cubing/twisty/views/TwistyAlgViewer.ts
+++ b/src/cubing/twisty/views/TwistyAlgViewer.ts
@@ -31,6 +31,7 @@ class DataDown {
   earliestMoveIndex: number;
   twistyAlgViewer: TwistyAlgViewer;
   direction: ExperimentalIterationDirection;
+  type?: string;
 }
 
 class DataUp {
@@ -91,6 +92,10 @@ class TwistyAlgWrapperElem extends HTMLElementShim {
     this.classList.add(className);
   }
 
+  addClass(className: string) {
+    this.classList.add(className);
+  }
+
   addString(str: string) {
     this.queue.push(document.createTextNode(str));
   }
@@ -149,6 +154,9 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
   public traverseAlg(alg: Alg, dataDown: DataDown): DataUp {
     let moveCount = 0;
     const element = new TwistyAlgWrapperElem("twisty-alg-alg", alg); // TODO: pick a better class name.
+    if (dataDown.type) {
+      element.addClass(dataDown.type);
+    }
     let first = true;
     for (const unit of experimentalDirect(alg.units(), dataDown.direction)) {
       if (!first) {
@@ -293,6 +301,7 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
         earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
         twistyAlgViewer: dataDown.twistyAlgViewer,
         direction: dataDown.direction,
+        type: "setup",
       }),
     );
     moveCount += aLen;
@@ -302,6 +311,7 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
         earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
         twistyAlgViewer: dataDown.twistyAlgViewer,
         direction: dataDown.direction,
+        type: "execution",
       }),
     );
     element.addString("]");
@@ -366,13 +376,18 @@ class MoveHighlighter {
     this.moveCharIndexMap.set(charIndex, elem);
   }
 
-  set(move: Parsed<Move> | null): void {
+  set(move: Parsed<Move> | null, twistyPlayer: TwistyPlayer): void {
     const newElem = move
       ? this.moveCharIndexMap.get(move.startCharIndex) ?? null
       : null;
     if (this.currentElem === newElem) {
       return;
     }
+    if (newElem?.parentElement?.classList.contains('execution')) {
+      twistyPlayer.tempoScale = 10;
+    } else {
+      twistyPlayer.tempoScale = 1;
+    }
     this.currentElem?.classList.remove("twisty-alg-current-move");
     this.currentElem?.setCurrentMove(false);
     newElem?.classList.add("twisty-alg-current-move");
@@ -434,10 +449,10 @@ export class TwistyAlgViewer extends HTMLElementShim {
         moveInfo ??= currentMoveInfo.movesStarting[0];
         moveInfo ??= currentMoveInfo.movesFinishing[0];
         if (!moveInfo) {
-          this.highlighter.set(null);
+          this.highlighter.set(null, twistyPlayer);
         } else {
           const mainCurrentMove = moveInfo.move; // TODO
-          this.highlighter.set(mainCurrentMove as Parsed<Move>);
+          this.highlighter.set(mainCurrentMove as Parsed<Move>, twistyPlayer);
         }
       },
     );
diff --git a/src/sites/experiments.cubing.net/cubing.js/twisty/twisty-alg-viewer.html b/src/sites/experiments.cubing.net/cubing.js/twisty/twisty-alg-viewer.html
index 7d7b2b4ff..86aa94922 100644
--- a/src/sites/experiments.cubing.net/cubing.js/twisty/twisty-alg-viewer.html
+++ b/src/sites/experiments.cubing.net/cubing.js/twisty/twisty-alg-viewer.html
@@ -28,7 +28,9 @@ <h1 style="text-align: center">
       </h1>
       <twisty-player
         id="main-player"
-        alg="([R, U])3 (U L)2' [M2': U2]"
+        alg="[R2: R U' R' U' R U R' F' R U R' U' R' F R]
+        [F2: R U' R' U' R U R' F' R U R' U' R' F R]
+        "
       ></twisty-player>
       <div class="alg-example">
         <twisty-alg-viewer for="main-player"></twisty-alg-viewer>