Weird hybrid

src/App.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react'
 import { useStore } from '@nanostores/react'
-import { Square, Archive, Dices, Sparkles } from 'lucide-react'
+import { Square, Archive, Dices, Sparkles, Blend } from 'lucide-react'
 import { DownloadService } from './services/DownloadService'
 import { generateRandomFormula } from './utils/bytebeatFormulas'
 import { BytebeatTile } from './components/tile/BytebeatTile'
@@ -55,7 +55,7 @@ function App() {
     }
   })
 
-  const { saveCurrentParams, loadParams, handleEngineChange, handleEffectChange, randomizeParams, randomizeAllParams } =
+  const { saveCurrentParams, loadParams, handleEngineChange, handleEffectChange, randomizeParams, randomizeAllParams, interpolateParams } =
     useParameterSync({
       tiles,
       setTiles,
@@ -171,9 +171,18 @@ function App() {
     }
   }
 
+  const handleRegenerate = (row: number, col: number) => {
+    const newTile = regenerateTile(row, col)
+    const tileId = getTileId(row, col)
+
+    if (playing === tileId) {
+      play(newTile.formula, tileId, newTile)
+    }
+  }
+
   const handleKeyboardR = () => {
     if (focusedTile !== 'custom') {
-      regenerateTile(focusedTile.row, focusedTile.col)
+      handleRegenerate(focusedTile.row, focusedTile.col)
     }
   }
 
@@ -200,6 +209,7 @@ function App() {
     onShiftR: handleRandom,
     onC: handleKeyboardC,
     onShiftC: randomizeAllParams,
+    onI: interpolateParams,
     onEscape: exitMappingMode
   })
 
@@ -296,6 +306,12 @@ function App() {
               >
                 <Sparkles size={12} strokeWidth={2} className="mx-auto" />
               </button>
+              <button
+                onClick={interpolateParams}
+                className="flex-1 px-2 py-2 bg-white text-black font-mono text-[9px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
+              >
+                <Blend size={12} strokeWidth={2} className="mx-auto" />
+              </button>
               <button
                 onClick={handleDownloadAll}
                 disabled={downloading}
@@ -390,6 +406,13 @@ function App() {
               <Sparkles size={12} strokeWidth={2} />
               CHAOS
             </button>
+            <button
+              onClick={interpolateParams}
+              className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1"
+            >
+              <Blend size={12} strokeWidth={2} />
+              MORPH
+            </button>
             <button
               onClick={handleDownloadAll}
               disabled={downloading}
@@ -442,7 +465,7 @@ function App() {
                   onPlay={handleTileClick}
                   onDoubleClick={handleTileDoubleClick}
                   onDownload={handleDownloadFormula}
-                  onRegenerate={regenerateTile}
+                  onRegenerate={handleRegenerate}
                 />
               )
             })