From 2733392dcc2827c18b546d6bc359c13cbf4e884d Mon Sep 17 00:00:00 2001
From: Dylan Greene <dylantgreene92@gmail.com>
Date: Tue, 24 Mar 2026 12:57:26 -0500
Subject: [PATCH 1/2] add speed controls

---
 src/kiri/mode/cam/app/anim-2d.js   | 18 +++++++++++++++---
 src/kiri/mode/cam/app/init-menu.js |  4 ++++
 web/kiri/index.css                 | 10 ++++++++++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/kiri/mode/cam/app/anim-2d.js b/src/kiri/mode/cam/app/anim-2d.js
index 5d3312e5e..2337898c7 100644
--- a/src/kiri/mode/cam/app/anim-2d.js
+++ b/src/kiri/mode/cam/app/anim-2d.js
@@ -53,7 +53,9 @@ export function animate(api, delay) {
             speed: anim.speed,
             trans: anim.trans,
             model: anim.model,
-            shade: anim.shade
+            shade: anim.shade,
+            speedup: anim.speedup,
+            speeddn: anim.speeddn,
         });
         Object.assign(label, {
             progress: anim.progress,
@@ -76,6 +78,8 @@ export function animate(api, delay) {
         button.trans.onclick = toggleTrans;
         button.model.onclick = toggleModel;
         button.shade.onclick = toggleStock;
+        button.speedup.onclick = increaseSpeed;
+        button.speeddn.onclick = decreaseSpeed;
         button.play.style.display = '';
         button.pause.style.display = 'none';
 
@@ -175,6 +179,14 @@ function toggleStock(ev,bool,set) {
     return api.event.emit('cam.stock.toggle', bool ?? undefined);
 }
 
+function increaseSpeed() {
+    updateSpeed(1);
+}
+
+function decreaseSpeed() {
+    updateSpeed(-1);
+}
+
 function toggleTrans(ev,bool) {
     bool = api.local.toggle('cam.anim.trans', bool);
     material.transparent = bool;
@@ -228,8 +240,8 @@ function handleGridUpdate(data) {
 function updateSpeed(inc = 0) {
     if (inc === Infinity) {
         speedIndex = speedMax;
-    } else if (inc > 0) {
-        speedIndex = (speedIndex + inc) % speedValues.length;
+    } else if (inc !== 0) {
+        speedIndex = Math.min(Math.max(speedIndex + inc, 0), speedValues.length - 1);
     }
     api.local.set('cam.anim.speed', speedIndex);
     speed = speedValues[speedIndex];
diff --git a/src/kiri/mode/cam/app/init-menu.js b/src/kiri/mode/cam/app/init-menu.js
index 6f59d4bc9..9fe8f79e7 100644
--- a/src/kiri/mode/cam/app/init-menu.js
+++ b/src/kiri/mode/cam/app/init-menu.js
@@ -99,6 +99,10 @@ export function menu() {
             anim.step     = newButton(null,"anim.step",{icon:'<i class="fas fa-step-forward"></i>',title:"single step"}),
             anim.speed    = newButton(null,"anim.fast",{icon:'<i class="fas fa-forward"></i>',title:"toggle speed"}),
             anim.labspd   = newValue(3, {class:"center padleft"}),
+            newRow([
+                anim.speedup = newButton(null,'anim.speedup',{icon:'<i class="fa-solid fa-arrow-up"></i>',title:"increase speed"}),
+                anim.speeddn = newButton(null,'anim.speeddn',{icon:'<i class="fa-solid fa-arrow-down"></i>',title:"decrease speed"})
+            ], {class: 'speed-controls padleft'}),
             anim.labx     = newLabel("X", {class:"padleft"}),
             anim.valx     = newValue(7, {class:"center"}),
             anim.laby     = newLabel("Y", {class:"padleft"}),
diff --git a/web/kiri/index.css b/web/kiri/index.css
index b5f499871..17ee65787 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -2153,6 +2153,16 @@ details[open] summary::after {
     color: #333;
     font-size: 30px;
 }
+#layer-animate .speed-controls {
+    flex-direction: column;
+}
+#layer-animate .speed-controls button {
+    width: auto;
+    padding: 0 4px;
+}
+#layer-animate .speed-controls svg {
+    font-size: 15px;
+}
 #layer-animate .padleft {
     margin-left: 8px !important;
 }

From f326bf77b8d8155432c545040c3d21500c880758 Mon Sep 17 00:00:00 2001
From: Dylan Greene <dylantgreene92@gmail.com>
Date: Tue, 24 Mar 2026 13:06:55 -0500
Subject: [PATCH 2/2] tweak control spacing

---
 web/kiri/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/kiri/index.css b/web/kiri/index.css
index 17ee65787..f8c665dac 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -2155,6 +2155,7 @@ details[open] summary::after {
 }
 #layer-animate .speed-controls {
     flex-direction: column;
+    justify-content: space-between;
 }
 #layer-animate .speed-controls button {
     width: auto;